initial commit
This commit is contained in:
115
frontend/public/index.html
Normal file
115
frontend/public/index.html
Normal file
@@ -0,0 +1,115 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"
|
||||
/>
|
||||
<title>Aethera - AI Conversation & Image Generator</title>
|
||||
<script type="module" src="./dist/main.js"></script>
|
||||
<link rel="stylesheet" href="./dist/styles.css" />
|
||||
</head>
|
||||
<body class="bg-primary-50" x-data x-init="$store.navigation.init()">
|
||||
<!-- Nav -->
|
||||
<div
|
||||
class="isolate fixed z-50 w-full flex justify-between mt-4 px-4 md:px-6"
|
||||
>
|
||||
<div class="size-9"></div>
|
||||
|
||||
<!-- Main Nav -->
|
||||
<nav class="inline-flex bg-primary-100 rounded-full shadow-sm">
|
||||
<a
|
||||
href="#/chats"
|
||||
:class="[
|
||||
'px-5 py-2 rounded-full text-sm font-medium transition-colors',
|
||||
$store.navigation.activeTab === 'chats'
|
||||
? 'bg-primary-600 text-white'
|
||||
: 'text-primary-700 hover:bg-primary-200'
|
||||
]"
|
||||
>
|
||||
Chats
|
||||
</a>
|
||||
<a
|
||||
href="#/images"
|
||||
:class="[
|
||||
'px-5 py-2 rounded-full text-sm font-medium transition-colors',
|
||||
$store.navigation.activeTab === 'images'
|
||||
? 'bg-primary-600 text-white'
|
||||
: 'text-primary-700 hover:bg-primary-200'
|
||||
]"
|
||||
>
|
||||
Images
|
||||
</a>
|
||||
<a
|
||||
href="#/settings"
|
||||
:class="[
|
||||
'px-5 py-2 rounded-full text-sm font-medium transition-colors',
|
||||
$store.navigation.activeTab === 'settings'
|
||||
? 'bg-primary-600 text-white'
|
||||
: 'text-primary-700 hover:bg-primary-200'
|
||||
]"
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Theme Toggle -->
|
||||
<button
|
||||
@click="$store.theme.cycleTheme()"
|
||||
x-init="$store.theme.init()"
|
||||
class="p-2 cursor-pointer rounded-md text-primary-700 hover:bg-primary-300 transition-colors"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<svg
|
||||
x-show="$store.theme.getThemeIcon() === 'sun'"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
x-show="$store.theme.getThemeIcon() === 'moon'"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
x-show="$store.theme.getThemeIcon() === 'system'"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main id="page-content" class="h-dvh"></main>
|
||||
</body>
|
||||
</html>
|
||||
397
frontend/public/pages/chats.html
Normal file
397
frontend/public/pages/chats.html
Normal file
@@ -0,0 +1,397 @@
|
||||
<div x-data="chatManager()">
|
||||
<!-- Chat Content -->
|
||||
<div
|
||||
class="h-dvh pt-16 flex flex-col-reverse pb-36 overflow-scroll mx-auto px-4 md:px-6 max-w-6xl"
|
||||
>
|
||||
<template x-for="message in currentChatMessages" :key="message.content">
|
||||
<div
|
||||
:class="['mb-4', message.role === 'user' ? 'text-right' : 'text-left']"
|
||||
>
|
||||
<div
|
||||
:class="['inline-block px-4 py-3 text-left rounded-lg max-w-[95%] md:max-w-[85%]',
|
||||
message.role === 'user'
|
||||
? 'bg-primary-100 text-primary-900 rounded-br-none'
|
||||
: 'bg-primary-200 text-primary-900 rounded-bl-none'
|
||||
]"
|
||||
>
|
||||
<!-- Thinking Section -->
|
||||
<div
|
||||
x-show="message.thinking"
|
||||
x-data="{ expanded: false }"
|
||||
@click="expanded = !expanded"
|
||||
>
|
||||
<div
|
||||
class="cursor-pointer rounded-lg overflow-hidden bg-primary-100 hover:bg-primary-50"
|
||||
>
|
||||
<div
|
||||
class="flex justify-center w-full px-3 py-2 text-xs text-primary-700 flex items-center gap-2 transition-colors"
|
||||
>
|
||||
<span x-text="expanded ? '▼' : '◀'"></span>
|
||||
<span class="font-medium">Reasoning</span>
|
||||
<span x-text="expanded ? '▼' : '▶'"></span>
|
||||
</div>
|
||||
<div
|
||||
x-show="expanded"
|
||||
class="prose p-4 max-w-none text-sm prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:p-0"
|
||||
x-html="renderMarkdown(message.thinking)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr x-show="message.thinking" class="my-2 border-primary-400/50" />
|
||||
|
||||
<!-- Main Content -->
|
||||
<div
|
||||
class="prose max-w-none text-sm prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:p-0"
|
||||
x-html="renderMarkdown(message.content)"
|
||||
></div>
|
||||
|
||||
<!-- Timestamp -->
|
||||
<div class="flex items-center justify-between gap-2 mt-2">
|
||||
<div
|
||||
class="text-[10px] opacity-60"
|
||||
x-text="new Date(message.created_at).toLocaleTimeString()"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Badges (Assistant) -->
|
||||
<div
|
||||
x-show="message.role === 'assistant' && message.stats"
|
||||
class="flex items-center gap-1 py-2 flex-wrap justify-start text-primary-700"
|
||||
>
|
||||
<!-- Cumulative Tokens with Hover Breakdown -->
|
||||
<div
|
||||
x-show="message.stats?.prompt_tokens || message.stats?.generated_tokens"
|
||||
class="group relative px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full cursor-help"
|
||||
>
|
||||
<span
|
||||
x-text="`${(message.stats?.prompt_tokens || 0) + (message.stats?.generated_tokens || 0)} tokens`"
|
||||
></span>
|
||||
|
||||
<!-- Tokens -->
|
||||
<div
|
||||
class="invisible group-hover:visible absolute bottom-full left-1/2 -translate-x-1/2 m-2 px-2 py-1 bg-gray-900 text-white text-[10px] rounded whitespace-nowrap pointer-events-none grid grid-cols-[auto_1fr] gap-x-2"
|
||||
>
|
||||
<div
|
||||
x-show="message.stats?.prompt_tokens"
|
||||
x-text="message.stats?.prompt_tokens"
|
||||
></div>
|
||||
<div x-show="message.stats?.prompt_tokens">prompt tokens</div>
|
||||
|
||||
<div
|
||||
x-show="message.stats?.generated_tokens"
|
||||
x-text="message.stats?.generated_tokens"
|
||||
></div>
|
||||
<div x-show="message.stats?.generated_tokens">
|
||||
generated tokens
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span
|
||||
x-show="message.stats?.prompt_per_second"
|
||||
class="px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full"
|
||||
x-text="`${message.stats?.prompt_per_second.toFixed(1)} ppt/s`"
|
||||
></span>
|
||||
<span
|
||||
x-show="message.stats?.generated_per_second"
|
||||
class="px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full"
|
||||
x-text="`${message.stats?.generated_per_second.toFixed(1)} tgt/s`"
|
||||
></span>
|
||||
<span
|
||||
x-show="message.stats?.time_to_first_token"
|
||||
class="px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full"
|
||||
x-text="`${(message.stats?.time_to_first_token / 1000).toFixed(2)}s TTFT`"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Floating Input and Model Selection -->
|
||||
<div class="fixed bottom-4 w-full flex justify-center px-4 md:px-6">
|
||||
<div class="w-full sm:w-[calc(100%-2rem)] max-w-3xl z-10">
|
||||
<div
|
||||
class="flex flex-col gap-3 p-3 bg-primary-50/95 backdrop-blur-sm rounded-2xl shadow-2xl border border-primary-200"
|
||||
>
|
||||
<!-- Model Select -->
|
||||
<div class="relative">
|
||||
<select
|
||||
x-model="selectedModel"
|
||||
class="w-full appearance-none px-9 py-3 bg-gradient-to-r from-primary-50 to-primary-300 border border-primary-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-400 text-primary-900 text-sm font-medium cursor-pointer transition-shadow hover:shadow-md"
|
||||
>
|
||||
<option value="">Select Model</option>
|
||||
<template x-for="model in models" :key="model.id">
|
||||
<option
|
||||
:value="model.id"
|
||||
x-text="model.name || model.id"
|
||||
></option>
|
||||
</template>
|
||||
</select>
|
||||
|
||||
<!-- Computer Icon -->
|
||||
<svg
|
||||
class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-primary-400 pointer-events-none"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<!-- Chevron Icon -->
|
||||
<svg
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-primary-400 pointer-events-none transition-colors hover:text-primary-500"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Message Form -->
|
||||
<form @submit.prevent="sendMessage" class="flex gap-2 items-end">
|
||||
<textarea
|
||||
x-model="inputMessage"
|
||||
placeholder="Type your message..."
|
||||
rows="1"
|
||||
class="scrollbar-hide flex-1 p-3 bg-primary-50 border border-primary-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-400 text-primary-900 text-sm transition-shadow hover:bg-primary-100 resize-none overflow-y-auto max-h-60"
|
||||
@keydown.enter="if (!$event.shiftKey) { $event.preventDefault(); sendMessage(); }"
|
||||
@input="$el.style.height = 'auto'; $el.style.height = $el.scrollHeight + 'px'"
|
||||
></textarea>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="!inputMessage.trim() || loading"
|
||||
:class="(!inputMessage.trim() || loading) ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-md hover:scale-105'"
|
||||
class="self-stretch w-[44px] bg-gradient-to-r from-primary-600 to-primary-500 text-white rounded-xl transition-all flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
<template x-if="loading">
|
||||
<div
|
||||
class="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"
|
||||
></div>
|
||||
</template>
|
||||
<template x-if="!loading">
|
||||
<svg
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div
|
||||
x-show="error"
|
||||
class="bg-tertiary-50 border border-tertiary-200 px-4 py-2"
|
||||
>
|
||||
<p class="text-sm text-tertiary-700" x-text="error"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Conversation List Toggle -->
|
||||
<button
|
||||
@click="chatListOpen = !chatListOpen"
|
||||
:aria-expanded="chatListOpen ? 'true' : 'false'"
|
||||
aria-label="Toggle left navigation"
|
||||
class="isolate cursor-pointer fixed z-50 flex justify-between top-4 left-4 md:left-6 p-2 rounded-md text-primary-700 hover:bg-primary-300 transition-colors"
|
||||
>
|
||||
<svg
|
||||
x-show="!chatListOpen"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
x-show="chatListOpen"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Floating Conversation List -->
|
||||
<div
|
||||
x-show="chatListOpen"
|
||||
x-transition:enter="transform transition-all duration-300 ease-out"
|
||||
x-transition:enter-start="-translate-x-full opacity-0"
|
||||
x-transition:enter-end="translate-x-0 opacity-100"
|
||||
x-transition:leave="transform transition-all duration-300 ease-in"
|
||||
x-transition:leave-start="translate-x-0 opacity-100"
|
||||
x-transition:leave-end="-translate-x-full opacity-0"
|
||||
class="fixed top-16 left-0 right-0 mx-auto md:left-6 md:right-auto md:mx-0 bottom-4 w-86 bg-primary-100 rounded-xl shadow-lg z-20 overflow-hidden flex flex-col"
|
||||
>
|
||||
<div class="px-4 py-3 border-b border-primary-200 flex justify-center">
|
||||
<h4 class="font-semibold text-primary-900">
|
||||
<span>Conversations</span>
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<!-- Conversation List-->
|
||||
<div id="left-nav-desktop" class="flex-1 overflow-y-auto p-4">
|
||||
<div
|
||||
x-show="chats.length === 0"
|
||||
class="h-full flex flex-col justify-center text-center py-8 text-primary-600"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-10 w-10 mx-auto mb-2 text-primary-300"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
||||
/>
|
||||
</svg>
|
||||
<p class="text-sm">No chats yet</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<template x-for="chat in chats" :key="chat.id">
|
||||
<div
|
||||
@click="selectChat(chat.id); chatListOpen = false;"
|
||||
:class="[
|
||||
'p-3 rounded-lg cursor-pointer transition-all border-l-3',
|
||||
selectedChatID === chat.id
|
||||
? 'bg-primary-200 border-l-primary-600'
|
||||
: 'hover:bg-primary-200 border-l-transparent'
|
||||
]"
|
||||
:title="chat.title"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<!-- Icon -->
|
||||
<div class="mt-0.5 shrink-0">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
:class="[
|
||||
'h-4 w-4',
|
||||
selectedChatID === chat.id ? 'text-primary-600' : 'text-primary-400'
|
||||
]"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-sm text-primary-900 truncate">
|
||||
<span x-text="chat.title || 'New Conversation'"></span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 mt-1.5 text-xs text-primary-600"
|
||||
>
|
||||
<span
|
||||
x-show="chat.message_count > 0"
|
||||
class="shrink-0 bg-primary-300 text-primary-700 px-1.5 py-0.5 rounded text-[10px] font-medium"
|
||||
x-text="chat.message_count"
|
||||
></span>
|
||||
<span class="truncate" x-text="chat.initial_message"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click.stop="deleteChat($event, chat.id)"
|
||||
class="cursor-pointer shrink-0 p-1 text-primary-400 hover:text-tertiary-600 hover:bg-tertiary-100 rounded transition-colors"
|
||||
title="Delete Chat"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Left Nav Footer -->
|
||||
<div
|
||||
x-show="$store.navigation.activeTab === 'chats'"
|
||||
class="p-4 border-t border-primary-200 shrink-0"
|
||||
>
|
||||
<button
|
||||
@click="selectChat(null)"
|
||||
class="w-full px-4 py-2.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors text-sm font-medium flex cursor-pointer items-center justify-center gap-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
New Conversation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
244
frontend/public/pages/images.html
Normal file
244
frontend/public/pages/images.html
Normal file
@@ -0,0 +1,244 @@
|
||||
<div
|
||||
class="flex flex-col gap-4 pt-16 mx-auto px-4 md:px-6 max-w-6xl"
|
||||
x-data="imageGenerator()"
|
||||
>
|
||||
<div>
|
||||
<form @submit.prevent="generateImage" class="flex flex-col gap-4 w-full">
|
||||
<!-- Prompt -->
|
||||
<div class="flex-1">
|
||||
<label for="prompt" class="text-sm font-medium text-primary-700"
|
||||
>Prompt</label
|
||||
>
|
||||
<textarea
|
||||
id="prompt"
|
||||
name="prompt"
|
||||
class="mt-1 p-2 w-full rounded-md border-primary-400 shadow focus:border-secondary-500 focus:ring-secondary-500 sm:text-sm min-h-[100px] overflow-y-auto text-primary-900 resize-none"
|
||||
required
|
||||
x-model="prompt"
|
||||
placeholder="Enter your image generation prompt here..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Parameters -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<div>
|
||||
<label
|
||||
for="nav-model"
|
||||
class="block text-sm font-medium text-primary-700"
|
||||
>Model</label
|
||||
>
|
||||
<select
|
||||
id="nav-model"
|
||||
name="model"
|
||||
x-model="selectedModel"
|
||||
class="mt-1 p-2 block w-full rounded-md border-primary-400 shadow focus:border-secondary-500 focus:ring-secondary-500 sm:text-sm text-primary-900"
|
||||
required
|
||||
>
|
||||
<option value="">Select Model</option>
|
||||
<template x-for="model in models" :key="model.id">
|
||||
<option :value="model.id" x-text="model.name"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="size" class="text-sm font-medium text-primary-700"
|
||||
>Size</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="size"
|
||||
name="size"
|
||||
x-model="size"
|
||||
class="mt-1 p-2 block w-full rounded-md border-primary-400 shadow focus:border-secondary-500 focus:ring-secondary-500 sm:text-sm text-primary-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<div class="flex-1">
|
||||
<label
|
||||
for="nav-n"
|
||||
class="block text-sm font-medium text-primary-700"
|
||||
>Count</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
id="nav-n"
|
||||
name="n"
|
||||
min="1"
|
||||
max="10"
|
||||
x-model="n"
|
||||
class="mt-1 p-2 block w-full rounded-md border-primary-400 shadow focus:border-secondary-500 focus:ring-secondary-500 sm:text-sm text-primary-900"
|
||||
value="1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<label
|
||||
for="nav-seed"
|
||||
class="block text-sm font-medium text-primary-700"
|
||||
>Seed</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
id="nav-seed"
|
||||
name="seed"
|
||||
x-model="seed"
|
||||
class="mt-1 p-2 block w-full rounded-md border-primary-400 shadow focus:border-secondary-500 focus:ring-secondary-500 sm:text-sm text-primary-900"
|
||||
value="-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="image-upload" class="text-sm font-medium text-primary-700"
|
||||
>Upload Image to Edit</label
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
id="image-upload"
|
||||
accept="image/*"
|
||||
@change="startEdit"
|
||||
class="mt-1 p-2 block w-full rounded-md border-primary-400 shadow text-primary-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Edit Panel -->
|
||||
<div
|
||||
id="edit-panel"
|
||||
x-show="editMode"
|
||||
class="mt-2 bg-primary-50 p-4 rounded shadow"
|
||||
>
|
||||
<div
|
||||
:class="['flex gap-4', isLandscape ? 'flex-col' : 'flex-col lg:flex-row']"
|
||||
>
|
||||
<!-- Image Preview -->
|
||||
<div class="flex justify-center relative">
|
||||
<img
|
||||
id="editing-image"
|
||||
:src="editingImage?.url"
|
||||
alt="Original image for editing"
|
||||
class="max-h-[75vh] rounded-lg shadow-md"
|
||||
/>
|
||||
<canvas
|
||||
id="mask"
|
||||
class="absolute top-0 left-0 w-full h-full rounded-lg cursor-crosshair"
|
||||
></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Mask Options -->
|
||||
<div class="flex-1 flex flex-col gap-2 mt-auto justify-end">
|
||||
<div class="mt-2">
|
||||
<label
|
||||
for="lineWidthSlider"
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Line Width: <span x-text="lineWidth"></span>
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
id="lineWidthSlider"
|
||||
x-model="lineWidth"
|
||||
min="1"
|
||||
max="100"
|
||||
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
@click="clearMask"
|
||||
class="mt-2 px-3 py-1 cursor-pointer bg-primary-200 text-primary-700 rounded hover:bg-primary-600 hover:text-white text-center transition-colors"
|
||||
>
|
||||
Clear Mask
|
||||
</span>
|
||||
<span
|
||||
@click="cancelEdit"
|
||||
class="mt-2 px-3 py-1 cursor-pointer bg-primary-200 text-primary-700 rounded hover:bg-primary-600 hover:text-white text-center transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
x-bind:disabled="loading || !selectedModel"
|
||||
:class="loading || !selectedModel ? 'cursor-not-allowed' : 'cursor-pointer'"
|
||||
class="inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-primary-50 bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 gap-2 transition-colors"
|
||||
>
|
||||
<span
|
||||
x-text="loading ? '' : editMode ? 'Edit Image' : 'Generate Image'"
|
||||
></span>
|
||||
<div
|
||||
x-show="loading"
|
||||
class="h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent"
|
||||
></div>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-lg font-medium text-primary-900 mb-2">Generated Images</h3>
|
||||
|
||||
<div
|
||||
x-show="error"
|
||||
class="bg-tertiary-50 border border-tertiary-200 rounded-md p-4 mb-4"
|
||||
>
|
||||
<p class="text-tertiary-700" x-text="error"></p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
x-show="!generatedImages.length"
|
||||
class="text-center py-8 text-primary-500"
|
||||
>
|
||||
No Images Found
|
||||
</div>
|
||||
|
||||
<div
|
||||
x-show="generatedImages.length"
|
||||
class="columns-2 md:columns-3 lg:columns-4 gap-2"
|
||||
>
|
||||
<template x-for="(image, index) in generatedImages" :key="index">
|
||||
<div
|
||||
class="flex flex-col gap-2 break-inside-avoid border border-primary-200 rounded-lg p-2 mb-2 h-full bg-primary-100 hover:border-primary-300 transition-colors shadow"
|
||||
>
|
||||
<button
|
||||
@click="deleteImage(image.name)"
|
||||
class="text-white hover:text-white text-sm justify-center cursor-pointer p-1 rounded bg-red-600 hover:bg-red-700 flex items-center h-full transition-colors"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<img
|
||||
:src="image.path"
|
||||
:alt="image.prompt"
|
||||
@click="openLightbox(image.path)"
|
||||
class="rounded-lg shadow-sm max-w-full h-auto cursor-pointer hover:opacity-90 transition-opacity"
|
||||
/>
|
||||
<span
|
||||
class="text-xs text-primary-500 bg-primary-200 px-2 py-1 rounded flex justify-center"
|
||||
x-text="image.date"
|
||||
></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lightbox -->
|
||||
<div
|
||||
x-show="lightbox.open"
|
||||
x-cloak
|
||||
@click="closeLightbox"
|
||||
@keydown.escape.window="closeLightbox"
|
||||
@keydown.arrow-left.window="prevImage"
|
||||
@keydown.arrow-right.window="nextImage"
|
||||
@touchstart="handleTouchStart"
|
||||
@touchend="handleTouchEnd"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/75 p-4 backdrop-blur-sm"
|
||||
>
|
||||
<img
|
||||
:src="lightbox.imageSrc"
|
||||
@click.stop
|
||||
class="max-w-[90vw] max-h-[90vh] object-contain rounded-lg shadow-2xl"
|
||||
alt="Full size preview"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
108
frontend/public/pages/settings.html
Normal file
108
frontend/public/pages/settings.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<form
|
||||
x-data="settingsManager()"
|
||||
@submit.prevent="saveSettings"
|
||||
class="p-0.5 w-full flex flex-col gap-4 pt-16 mx-auto px-4 md:px-6 max-w-6xl"
|
||||
>
|
||||
<div>
|
||||
<label
|
||||
for="apiEndpoint"
|
||||
class="block text-sm font-semibold text-primary-700"
|
||||
>API Endpoint URL</label
|
||||
>
|
||||
<div class="ml-1">
|
||||
<input
|
||||
type="url"
|
||||
id="apiEndpoint"
|
||||
name="apiEndpoint"
|
||||
x-model="settings.api_endpoint"
|
||||
class="mt-1 p-1 block w-full rounded-md border-primary-400 shadow focus:border-secondary-500 focus:ring-secondary-500 sm:text-sm text-primary-900"
|
||||
placeholder="https://api.example.com/v1"
|
||||
required
|
||||
/>
|
||||
<p class="mt-2 text-xs text-primary-500">URL of your API endpoint</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm font-medium font-semibold text-primary-700"
|
||||
>Selectors</span
|
||||
>
|
||||
<div class="flex flex-col md:flex-row pl-1 gap-4 justify-between">
|
||||
<div class="w-full">
|
||||
<label
|
||||
for="generateModelSelector"
|
||||
class="text-sm font-medium text-primary-700"
|
||||
>Image</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="generateModelSelector"
|
||||
name="generateModelSelector"
|
||||
x-model="settings.image_generation_selector"
|
||||
class="mt-1 p-1 block w-full rounded-md border-primary-400 shadow focus:border-secondary-500 focus:ring-secondary-500 sm:text-sm text-primary-900"
|
||||
placeholder=".meta.type: image-generate"
|
||||
/>
|
||||
<p class="mt-2 text-xs text-primary-500">Image generation selector</p>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<label
|
||||
for="editModelSelector"
|
||||
class="text-sm font-medium text-primary-700"
|
||||
>Image Edit</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="editModelSelector"
|
||||
name="editModelSelector"
|
||||
x-model="settings.image_edit_selector"
|
||||
class="mt-1 p-1 block w-full rounded-md border-primary-400 shadow focus:border-secondary-500 focus:ring-secondary-500 sm:text-sm text-primary-900"
|
||||
placeholder=".meta.type: image-edit"
|
||||
/>
|
||||
<p class="mt-2 text-xs text-primary-500">
|
||||
Image edit generation selector
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<label
|
||||
for="textModelSelector"
|
||||
class="text-sm font-medium text-primary-700"
|
||||
>Chat</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="textGenerationSelector"
|
||||
name="textGenerationSelector"
|
||||
x-model="settings.text_generation_selector"
|
||||
class="mt-1 p-1 block w-full rounded-md border-primary-400 shadow focus:border-secondary-500 focus:ring-secondary-500 sm:text-sm text-primary-900"
|
||||
placeholder=".meta.type: text-generate"
|
||||
/>
|
||||
<p class="mt-2 text-xs text-primary-500">Text generation selector</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
x-show="error"
|
||||
class="bg-tertiary-50 border border-tertiary-200 rounded-md p-4"
|
||||
>
|
||||
<p class="text-tertiary-700" x-text="error"></p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
x-show="saved"
|
||||
class="bg-secondary-50 border border-secondary-200 rounded-md p-4"
|
||||
>
|
||||
<p class="text-secondary-700">Settings saved successfully!</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
x-bind:disabled="loading"
|
||||
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-primary-50 bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 cursor-pointer transition-colors"
|
||||
>
|
||||
Save Settings
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
Reference in New Issue
Block a user