main
This commit is contained in:
uyuyorum {um} committed
1 parent
b54f013fd9
commit
23eac68661
12 files changed
+8499
No files matched your search
@@ -0,0 +1 @@
|
|||||||
|
NUXT_OPENAI_API_KEY=xxxxxxxxxxxxxxxxxxxxxx
|
||||||
+23
@@ -0,0 +1,23 @@
|
|||||||
|
# Nuxt dev/build outputs
|
||||||
|
.output
|
||||||
|
.nuxt
|
||||||
|
.nitro
|
||||||
|
.cache
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Node dependencies
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Misc
|
||||||
|
.DS_Store
|
||||||
|
.fleet
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# Local env files
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
<script setup>
|
||||||
|
import { useChat } from 'ai/vue'
|
||||||
|
const { messages, input, handleInputChange, handleSubmit, isLoading, reload } = useChat()
|
||||||
|
|
||||||
|
const downloadIframeContent = (iframeContent) => {
|
||||||
|
const blob = new Blob([iframeContent], { type: "text/html" });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = url;
|
||||||
|
a.download = "index.html";
|
||||||
|
a.click();
|
||||||
|
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="container mx-auto">
|
||||||
|
<div class="flex flex-col w-full max-w-md py-40 mx-auto stretch text-white">
|
||||||
|
<div class="flex justify-center align-center">
|
||||||
|
<Sharingan :isLoading="isLoading" />
|
||||||
|
<Ascii />
|
||||||
|
</div>
|
||||||
|
<form @submit="handleSubmit" v-if="!isLoading" class="font-mono ml-40" >
|
||||||
|
<label for="chat-input" class="sr-only">I'm your eyes..</label>
|
||||||
|
<div class="relative">
|
||||||
|
<textarea id="chat-input"
|
||||||
|
class="block w-full resize-none rounded-xl border-none bg-black p-4 pr-16 text-sm text-slate-900 shadow-md focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-black dark:text-slate-200 dark:placeholder-slate-400 dark:focus:ring-red-500 sm:text-base"
|
||||||
|
placeholder="I'm your eyes.." v-model="input" @change="handleInputChange" rows="1" required></textarea>
|
||||||
|
<button
|
||||||
|
class="absolute bottom-2 right-2.5 rounded-lg bg-gray-500 p-2 text-sm font-medium text-slate-200 hover:bg-red-500 focus:outline-none focus:ring-4 focus:ring-red-300 dark:bg-gray-500 dark:hover:bg-red-700 dark:focus:ring-red-800 sm:text-base">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2"
|
||||||
|
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
|
<path d="M10 14l11 -11"></path>
|
||||||
|
<path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"></path>
|
||||||
|
</svg>
|
||||||
|
<span class="sr-only">Send message</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="mx-auto mb-10">
|
||||||
|
<div v-for="m in messages" :key="m.id">
|
||||||
|
<div v-if="m.role === 'assistant' && m.content">
|
||||||
|
<div class="flex flex-col items-center h-2/3 w-full">
|
||||||
|
<div class="flex justify-center m-5">
|
||||||
|
<button class="bg-red-800 rounded-lg text-center font-mono font-bold text-white p-5 hover:bg-green-800"
|
||||||
|
@click="downloadIframeContent(m.content)"
|
||||||
|
v-if="!isLoading && messages.length > 0">
|
||||||
|
Download [index.html]
|
||||||
|
<small class="block opacity-40">made with um-sharingan</small>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="border p-3 rounded-lg w-full border-orange-950">
|
||||||
|
<div class="h-[36rem]">
|
||||||
|
<iframe sandbox="allow-same-origin allow-scripts" :srcdoc="m.content" style="width: 100%; height: 100%;"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
body::-webkit-scrollbar {
|
||||||
|
width: 0.3em;
|
||||||
|
}
|
||||||
|
body::-webkit-scrollbar-track {
|
||||||
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
body::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #7c7c7c;
|
||||||
|
outline: 1px solid #7c7c7c;
|
||||||
|
}
|
||||||
|
::selection {
|
||||||
|
color: #fff;
|
||||||
|
background: #973636;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
<template>
|
||||||
|
<div class="text-center">
|
||||||
|
<pre class="shadow-lg text-xs opacity-50 font-mono tracking-widest mt-20 text-red-800">
|
||||||
|
██ ██ ███ ███ ███████ ██ ██ █████ ██████ ██ ███ ██ ██████ █████ ███ ██
|
||||||
|
██ ██ ████ ████ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██ ██ ████ ██
|
||||||
|
██ ██ ██ ████ ██ █████ ███████ ███████ ███████ ██████ ██ ██ ██ ██ ██ ███ ███████ ██ ██ ██
|
||||||
|
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
|
||||||
|
██████ ██ ██ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██████ ██ ██ ██ ████
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,361 @@
|
|||||||
|
<script setup>
|
||||||
|
const props = defineProps({
|
||||||
|
isLoading: Boolean,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="eyeleft">
|
||||||
|
<div class="sharingano-div">
|
||||||
|
<span class="sharingano" :class="isLoading ? 'animation0' : 'animation3'">
|
||||||
|
<span class="inner-red"></span>
|
||||||
|
<span class="inner-black">
|
||||||
|
<span class="inner-full-black"></span>
|
||||||
|
</span>
|
||||||
|
<span class="tomoe t1"></span>
|
||||||
|
<span class="tomoe t2"></span>
|
||||||
|
<span class="tomoe t3"></span>
|
||||||
|
<span class="roundt1"></span>
|
||||||
|
<span class="roundt2"></span>
|
||||||
|
<span class="roundt3"></span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.sharingan {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 6px solid #231e1f;
|
||||||
|
height: 200px;
|
||||||
|
width: 200px;
|
||||||
|
background-color: #a73a3a;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-transition: 0.7s ease;
|
||||||
|
-moz-transition: 0.7s ease;
|
||||||
|
-o-transition: 0.7s ease;
|
||||||
|
-webkit-box-shadow: inset 0 0 30px #231e1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sharingan:before {
|
||||||
|
content: "";
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #231e1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes round {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(-360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sharingano-div {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
display: flex;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sharingano {
|
||||||
|
position: relative;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 6px solid #131212;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #a73a3a;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-transition: 0.7s ease;
|
||||||
|
-moz-transition: 0.7s ease;
|
||||||
|
-o-transition: 0.7s ease;
|
||||||
|
-webkit-box-shadow: inset 0 0 30px #231e1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation3 {
|
||||||
|
animation: 3s round infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation0 {
|
||||||
|
animation: 0.1s round infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner-black {
|
||||||
|
width: 70%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid #131212;
|
||||||
|
background-color: #a73a3a;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner-full-black {
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #131212;
|
||||||
|
width: 45%;
|
||||||
|
height: 45%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner-red {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 20%;
|
||||||
|
height: 20%;
|
||||||
|
z-index: 50;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #a73a3a;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tomoe {
|
||||||
|
position: absolute;
|
||||||
|
width: 15%;
|
||||||
|
height: 50%;
|
||||||
|
background-color: #131212;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t1 {
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
-moz-transform: translateX(-50%);
|
||||||
|
-ms-transform: translateX(-50%);
|
||||||
|
-o-transform: translateX(-50%);
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.roundt1 {
|
||||||
|
width: 30%;
|
||||||
|
height: 65%;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 35%;
|
||||||
|
background-color: #131212;
|
||||||
|
z-index: 5;
|
||||||
|
transform: rotateZ(-30deg);
|
||||||
|
-moz-transform: rotateZ(-30deg);
|
||||||
|
-moz-transform: rotateZ(-30deg);
|
||||||
|
-ms-transform: rotateZ(-30deg);
|
||||||
|
-o-transform: rotateZ(-30deg);
|
||||||
|
-webkit-transform: rotateZ(-30deg);
|
||||||
|
transform-origin: top;
|
||||||
|
-moz-transform-origin: top;
|
||||||
|
-ms-transform-origin: top;
|
||||||
|
-o-transform-origin: top;
|
||||||
|
-webkit-transform-origin: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t2 {
|
||||||
|
left: 20%;
|
||||||
|
bottom: 10%;
|
||||||
|
transform: rotateZ(55deg);
|
||||||
|
-moz-transform: rotateZ(55deg);
|
||||||
|
-ms-transform: rotateZ(55deg);
|
||||||
|
-o-transform: rotateZ(55deg);
|
||||||
|
-webkit-transform: rotateZ(55deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.roundt2 {
|
||||||
|
width: 30%;
|
||||||
|
height: 65%;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
right: -5%;
|
||||||
|
bottom: -44%;
|
||||||
|
background-color: #131212;
|
||||||
|
z-index: 5;
|
||||||
|
transform: rotateZ(96deg);
|
||||||
|
-moz-transform: rotateZ(96deg);
|
||||||
|
-ms-transform: rotateZ(96deg);
|
||||||
|
-o-transform: rotateZ(96deg);
|
||||||
|
-webkit-transform: rotateZ(96deg);
|
||||||
|
transform-origin: top;
|
||||||
|
-moz-transform-origin: top;
|
||||||
|
-ms-transform-origin: top;
|
||||||
|
-o-transform-origin: top;
|
||||||
|
-webkit-transform-origin: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t3 {
|
||||||
|
right: 20%;
|
||||||
|
bottom: 10%;
|
||||||
|
transform: rotateZ(-55deg);
|
||||||
|
-moz-transform: rotateZ(-55deg);
|
||||||
|
-ms-transform: rotateZ(-55deg);
|
||||||
|
-o-transform: rotateZ(-55deg);
|
||||||
|
-webkit-transform: rotateZ(-55deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.roundt3 {
|
||||||
|
width: 30%;
|
||||||
|
height: 65%;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: -5%;
|
||||||
|
bottom: -44%;
|
||||||
|
background-color: #131212;
|
||||||
|
transform: rotateZ(205deg);
|
||||||
|
-moz-transform: rotateZ(205deg);
|
||||||
|
-ms-transform: rotateZ(205deg);
|
||||||
|
-o-transform: rotateZ(205deg);
|
||||||
|
-webkit-transform: rotateZ(205deg);
|
||||||
|
transform-origin: top;
|
||||||
|
-moz-transform-origin: top;
|
||||||
|
-ms-transform-origin: top;
|
||||||
|
-o-transform-origin: top;
|
||||||
|
-webkit-transform-origin: top;
|
||||||
|
z-index: 5;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.t1::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: -50%;
|
||||||
|
width: 40%;
|
||||||
|
height: 80%;
|
||||||
|
background-color: #131212;
|
||||||
|
transform-origin: bottom center;
|
||||||
|
-ms-transform-origin: bottom center;
|
||||||
|
-o-transform-origin: bottom center;
|
||||||
|
-webkit-transform-origin: bottom center;
|
||||||
|
-moz-transform-origin: bottom center;
|
||||||
|
transform: rotateZ(13deg);
|
||||||
|
-moz-transform: rotateZ(13deg);
|
||||||
|
-ms-transform: rotateZ(13deg);
|
||||||
|
-o-transform: rotateZ(13deg);
|
||||||
|
-webkit-transform: rotateZ(13deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.t1::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: -50%;
|
||||||
|
width: 40%;
|
||||||
|
height: 80%;
|
||||||
|
background-color: #131212;
|
||||||
|
transform-origin: bottom center;
|
||||||
|
-ms-transform-origin: bottom center;
|
||||||
|
-o-transform-origin: bottom center;
|
||||||
|
-webkit-transform-origin: bottom center;
|
||||||
|
-moz-transform-origin: bottom center;
|
||||||
|
transform: rotateZ(-13deg);
|
||||||
|
-moz-transform: rotateZ(-13deg);
|
||||||
|
-ms-transform: rotateZ(-13deg);
|
||||||
|
-o-transform: rotateZ(-13deg);
|
||||||
|
-webkit-transform: rotateZ(-13deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.t2::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -50%;
|
||||||
|
width: 41%;
|
||||||
|
height: 80%;
|
||||||
|
background-color: #131212;
|
||||||
|
transform-origin: top center;
|
||||||
|
-moz-transform-origin: top center;
|
||||||
|
-ms-transform-origin: top center;
|
||||||
|
-o-transform-origin: top center;
|
||||||
|
-webkit-transform: top center;
|
||||||
|
transform: rotateZ(-13deg);
|
||||||
|
-moz-transform: rotateZ(-13deg);
|
||||||
|
-ms-transform: rotateZ(-13deg);
|
||||||
|
-o-transform: rotateZ(-13deg);
|
||||||
|
-webkit-transform: rotateZ(-13deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.t2::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: -50%;
|
||||||
|
width: 40%;
|
||||||
|
height: 80%;
|
||||||
|
background-color: #131212;
|
||||||
|
transform-origin: top center;
|
||||||
|
-moz-transform-origin: top center;
|
||||||
|
-ms-transform-origin: top center;
|
||||||
|
-o-transform-origin: top center;
|
||||||
|
-webkit-transform: top center;
|
||||||
|
transform: rotateZ(13deg);
|
||||||
|
-moz-transform: rotateZ(13deg);
|
||||||
|
-ms-transform: rotateZ(13deg);
|
||||||
|
-o-transform: rotateZ(13deg);
|
||||||
|
-webkit-transform: rotateZ(13deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.t3::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -50%;
|
||||||
|
width: 41%;
|
||||||
|
height: 80%;
|
||||||
|
background-color: #131212;
|
||||||
|
transform-origin: top center;
|
||||||
|
-moz-transform-origin: top center;
|
||||||
|
-ms-transform-origin: top center;
|
||||||
|
-o-transform-origin: top center;
|
||||||
|
-webkit-transform: top center;
|
||||||
|
transform: rotateZ(-13deg);
|
||||||
|
-moz-transform: rotateZ(-13deg);
|
||||||
|
-ms-transform: rotateZ(-13deg);
|
||||||
|
-o-transform: rotateZ(-13deg);
|
||||||
|
-webkit-transform: rotateZ(-13deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.t3::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: -50%;
|
||||||
|
width: 40%;
|
||||||
|
height: 80%;
|
||||||
|
background-color: #131212;
|
||||||
|
transform-origin: top center;
|
||||||
|
-moz-transform-origin: top center;
|
||||||
|
-ms-transform-origin: top center;
|
||||||
|
-o-transform-origin: top center;
|
||||||
|
-webkit-transform: top center;
|
||||||
|
transform: rotateZ(13deg);
|
||||||
|
-moz-transform: rotateZ(13deg);
|
||||||
|
-ms-transform: rotateZ(13deg);
|
||||||
|
-o-transform: rotateZ(13deg);
|
||||||
|
-webkit-transform: rotateZ(13deg);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
devtools: { enabled: false },
|
||||||
|
modules: ['@nuxtjs/tailwindcss'],
|
||||||
|
runtimeConfig: {
|
||||||
|
openaiApiKey: ''
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"name": "sharingan.uyuyorum.com",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"build": "nuxt build",
|
||||||
|
"dev": "nuxt dev",
|
||||||
|
"generate": "nuxt generate",
|
||||||
|
"preview": "nuxt preview",
|
||||||
|
"postinstall": "nuxt prepare"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@nuxt/devtools": "0.6.4",
|
||||||
|
"@nuxtjs/tailwindcss": "^6.7.2",
|
||||||
|
"@types/node": "^18",
|
||||||
|
"@vue/reactivity": "^3.3.4",
|
||||||
|
"@vue/runtime-core": "^3.3.4",
|
||||||
|
"@vue/runtime-dom": "^3.3.4",
|
||||||
|
"@vue/shared": "^3.3.4",
|
||||||
|
"ai": "2.1.32",
|
||||||
|
"nuxt": "^3.5.2",
|
||||||
|
"openai-edge": "^0.5.1",
|
||||||
|
"tailwindcss": "^3.3.2",
|
||||||
|
"unctx": "^2.3.1",
|
||||||
|
"vue": "^3.3.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
Generated
+7903
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,23 @@
|
|||||||
|
export const systemPrompt: string = `
|
||||||
|
You are a talented FiveM Police or Sheriff or Ambulance MDT UI designer who needs help creating a clear and concise HTML UI using Tailwind CSS. The UI should be visually appealing and responsive. Please design a UI component that includes the following elements:
|
||||||
|
|
||||||
|
MDT UI Design: This is an MDT UI that cops or sheriff use as a tablet in FiveM, they usually search for people and look at car registrations, think of it as an interrogation panel
|
||||||
|
|
||||||
|
1. General: Use Tailwind CSS to style the UI component. The UI should be responsive and visually appealing. Use Dark Mode and text-white.
|
||||||
|
2. Header: Add a logo and text and exit button on the left side with the text "Los Santos Police Department" and a exit button on the right side.
|
||||||
|
3. Logo: generating it with the URL "https://source.unsplash.com/featured/1280x720/?face"
|
||||||
|
4. Sidebar: Create a sidebar left side with icons Dashboard, Profiles, Incidents, Warrants, Vehicles, Evidence and settings.
|
||||||
|
5. Border: Make borders rounded.
|
||||||
|
6. Icons from the font-awesome CDN icon library or hero icons cdn library. Apply subtle CSS animations, such as fade-in or slide-in effects using Animate.css, to enhance visual appeal.
|
||||||
|
7. Content: Since the pages will be different, just make a content on the dashboard next to the sidebar with boxes and flex-center.
|
||||||
|
8. Footer: MDT Los Santos Police text center.
|
||||||
|
9. Important: Make sure all of this happens
|
||||||
|
|
||||||
|
Please ensure the HTML code is valid and properly structured, incorporating the necessary CDN links for Tailwind CSS, font-awesome icons, jQuery, Animate.css, and any additional CSS or JS files.
|
||||||
|
|
||||||
|
Remember to keep the design minimalistic, intuitive, and visually appealing. Your attention to detail is highly appreciated. Once you complete the design, provide the HTML code for the UI component. The code should be valid HTML, formatted for readability, and include the necessary CDN links for Tailwind CSS, icons, and any additional libraries used for data visualization.
|
||||||
|
|
||||||
|
Given the prompt, generate the only HTML code for the UI component. The code should be valid HTML and include the necessary CDN links for Tailwind CSS, font-awesome icons, and any additional CSS and JavaScript files.
|
||||||
|
|
||||||
|
Start with <!DOCTYPE html> and end with </html>. The code should be formatted for readability.
|
||||||
|
`;
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
// ./api/chat.ts
|
||||||
|
import { Configuration, OpenAIApi } from 'openai-edge'
|
||||||
|
import { OpenAIStream } from 'ai'
|
||||||
|
import { systemPrompt } from '../../prompts/mdt'
|
||||||
|
|
||||||
|
// Create an OpenAI API client (that's edge friendly!)
|
||||||
|
const config = new Configuration({
|
||||||
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||||
|
apiKey: useRuntimeConfig().openaiApiKey
|
||||||
|
})
|
||||||
|
const openai = new OpenAIApi(config)
|
||||||
|
|
||||||
|
export default defineEventHandler(async (event: any) => {
|
||||||
|
// Extract the `prompt` from the body of the request
|
||||||
|
const { messages } = await readBody(event)
|
||||||
|
const mainPrompt = systemPrompt
|
||||||
|
|
||||||
|
const mergeMessages = [
|
||||||
|
...messages,
|
||||||
|
{ role: "system", content: mainPrompt },
|
||||||
|
];
|
||||||
|
|
||||||
|
// Ask OpenAI for a streaming chat completion given the prompt
|
||||||
|
const response = await openai.createChatCompletion({
|
||||||
|
model: 'gpt-3.5-turbo-16k-0613',
|
||||||
|
stream: true,
|
||||||
|
messages: mergeMessages.map((message: any) => ({
|
||||||
|
content: message.content,
|
||||||
|
role: message.role
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
|
||||||
|
// Convert the response into a friendly text-stream
|
||||||
|
const stream = OpenAIStream(response)
|
||||||
|
// Respond with the stream
|
||||||
|
const reader = stream.getReader()
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
function read() {
|
||||||
|
reader.read().then(({ done, value }) => {
|
||||||
|
if (done) {
|
||||||
|
event.node.res.end()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
event.node.res.write(value)
|
||||||
|
read()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
read()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"extends": "../.nuxt/tsconfig.server.json"
|
||||||
|
}
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
// https://nuxt.com/docs/guide/concepts/typescript
|
||||||
|
"extends": "./.nuxt/tsconfig.json"
|
||||||
|
}
|
||||||
Reference in new issue
Block a user