Next-Generation Client-Side AI Ecosystem: Image Generation, Roleplay Chat, Image Editor & Visual Stories
Transform your imagination into stunning visuals and interactive stories in seconds — zero server dependencies, entirely running client-side.
- About The Project
- Key Features
- Codebase Architecture & File Structure
- Screenshots
- Installation & Usage
- Configuration & API Key
- Tech Stack
- Contributing
- License
Thena is a high-performance, browser-native AI creative platform engineered entirely with Vanilla JavaScript, HTML5, and CSS3 (no heavy frameworks, no React/Vue compilation). By harnessing modern Web APIs, it delivers a desktop-grade, zero-backend suite for content creation, narrative generation, and visual storytelling directly inside a web tab.
The platform is designed around four key pillars:
| Pillar | Architecture & Purpose |
|---|---|
| 🎨 AI Image Generation | Multi-model, multi-style synthesis utilizing custom API endpoints with real-time prompt feedback. |
| 🤖 AI Roleplay Chat | Fully immersive conversational engine with custom character metadata, memory integration, and sentiment analysis. |
| 🖼️ Image Editor | Canvas-level pixel manipulation, AI outpainting, upscaling, blending (fusion), and human-focused Gender Swapping. |
| 📖 AI Stories (Thena Toons) | A smooth webtoon-style graphic novel reader with lazy-loaded image pipelines. |
- Multi-Model Engine — Start creating with Thena's own image generation models, as well as the most advanced image models worldwide, including the newly added Midjourney V8.1 model!
- Multi-Image Generation & Saving — Upgraded generation pipeline to handle multiple parallel images returned in a single API payload, automatically saving all results into the local database.
- Precise Aspect Ratios — Built-in aspect adapters for Standard (1:1), Portrait (3:4, 9:16), and Widescreen (16:9, 4:3) ratios.
- Optimization Modes — Choose between Fast Mode for rapid iterations, Creative & Dense for structural complexity, and HighRes for supersampled rendering.
- Prompt Engineering Tools:
- Magic Wand ✨ — Automatically expands short, descriptive phrases into highly detailed prompts.
- Live Prompt Preview — A dynamic indicator analyzing complexity and length constraints.
- Curated Style Presets — Instantly apply preset community-curated styles.
- Contextual Character Lore — Engage with characters featuring extensive system prompts, narrative settings, and dating-sim mechanics.
- Multi-Tier LLM Support — Switch dynamically between Fast, Balanced, and Ultra intelligence tiers.
- Real-Time Sentiment Analysis — An emotional state engine analyzes the character's narrative output to automatically update their visual facial expression.
- Dynamic User Profiles — Customize username, age, and gender preferences; the system dynamically adapts the AI character's tone, memory boundaries, and response structures.
- The Warden Guard — Built-in local content moderation with adjustable levels (Low / Medium / High).
- Interface Settings — Fluid grid, list, and compact library views with full export/import utilities, including a dialogue Skip Button for rapid conversation pacing.
- AI Outpainting — Extrapolate and extend canvas borders outward, filling newly defined areas seamlessly.
- 4K Upscaling — Enhances resolution using advanced super-resolution models.
- AI Image Fusion — Harmonizes two distinct images utilizing blend percentages and targeted model adapters.
- Advanced Processing Models — Segmented with speed/quality indicators: FAST (PixelFusion), BEST (NeuralFlow), and MAX (Synapse).
- Gender Swap Tool 🔄 — Swap character features dynamically using cloud-based AI worker pipelines, supporting async polling and automatic result injection.
- Non-Destructive Adjustments — Fine-tune levels for brightness, contrast, temperature, and saturation.
- Markup & Annotations — Built-in canvas brushes, text tools, and filter presets with localized real-time search.
- Distraction-Free Reading — Optimized vertical flow designed for webtoon layout consumption.
- Chapter State Manager — Tracks current episode progression ("Ongoing" and "Completed") cached directly in IndexedDB.
- Lazy Loading — High-resolution comic sequences load on viewport entry, preserving CPU/GPU resources.
- Live Balance Tracking — Interactive header widget displays your current token balance in real-time, pulsing on updates and warning on low credits.
- Detailed Package Analytics — Detailed comparison modals comparing pricing rates (₺) and estimating usages across different paid AI models.
- Connection Codes — Easily share your connection code to send and receive peer-to-peer gifts securely.
- Safe Purchase Verification — Prevent accidental double orders with key verification checkboxes and quick API key copying features.
- Cinematic Intro — Eye-catching letter spinning title intro animation accompanied by 8-bit procedurally generated synthesizers.
- Interactive Spotlight Tour — Step-by-step element highlight tours (19 interactive steps) teaching users how to use models, prompt magic wands, outpainting, and settings.
- Smooth Transitions & Skip Options — Fully responsive overlay mask with quick skip actions, restart options in settings, and custom success audio/visual notifications.
- System Stats HUD — A draggable, resizable performance overlay tracking estimated FPS, memory usage, and GPU render cycles.
- Power Saver API — Intercepts tab state changes (visibility/idle) to suspend audio synthesis, pause heavy CSS animations, and lock wake states via the Wake Lock API.
- DOM Virtualization — Chat messages are loaded efficiently to avoid memory bloat, keeping scrolling lag-free.
- Local Database Storage — Powered by
IndexedDB, ensuring all custom characters, generated images, favorites, and transcripts are kept offline on your device. - Privacy by Design — API keys and personal profile details are saved directly in
LocalStoragewithout third-party transit.
- Comprehensive API Documentation (
api.html) — Fully documented local API endpoints for image generation, model pricing, ETAs, chatbot character metadata, and credit sharing. - Interactive API Console — Test API requests directly from a built-in UI playground with real-time response rendering and JSON tree views.
- Easy Code Integration — Ready-to-use client snippets in multiple programming languages.
- Dedicated Navigation — Instant access to local documentation from the updated header menu and redirection prompts.
Here is a breakdown of the core script modules that orchestrate the platform:
Thena-Web/
├── index.html # Semantic structural entrypoint and layout framework
├── trailer.html # Standalone cinematic trailer presentation layer
├── api.html # Developer API documentation page & interactive playground
├── manifest.json # PWA configuration and mobile icons settings
├── css/
│ ├── style.css # Unified stylesheets, theme engines, and animations
│ ├── welcome.css # Cinematic welcome and interactive spotlight guide styles
│ ├── trailer.css # Video player container and cinematic intro styles
│ ├── editor-search.css # Photo editor localized search styles and layout rules
│ ├── model-gallery.css # Layout styles for the AI model browser card gallery
│ └── prompt-preview.css # CSS styles for visual prompt keyword analytics and overlays
└── scripts/
├── script.js # Main application controller (Orchestrator & Image Gen)
├── elements.js # CACHED DOM element registry for selector optimization
├── lang.js # Localization dictionaries and i18n translation engine
├── aiChat.js # Chat framework, character database, and chat UI logic
├── chatMessages.js # Chat bubble template builders and list render controls
├── chatImageDownloader.js # Async downloader utility for media within chat bubbles
├── imageEditor.js # Photo filters, Canvas API operations, and Outpaint/Fusion tools
├── aiStories.js # Webtoon reader controller and episode sequence loader
├── modelGallery.js # Interactive catalog showcasing different image checkpoints
├── loadAllModels.js # Details and assets downloader for different synthesis models
├── favorites-backups.js # Data export/import utility and IndexedDB backup management
├── powerSaver.js # Idle detector, battery/wake lock state manager
├── visibilityOptimizer.js # IntersectionObserver engine pausing off-screen animations
├── cpu.js # HUD diagnostics parser (FPS, CPU & RAM monitor)
├── promptPreview.js # Visual prompt length and keyword density indicators
├── promptexpansion.js # Prompt expansion engine ("Magic Wand" logic)
├── trailer.js # Introduction trailer video controller
├── welcome.js # Cinematic introduction and interactive user guide (tutorial)
├── credits.js # Credits system integration (gifting, packages, balance check)
├── customSelect.js # Styled custom dropdown selection elements controller
└── sw.js # Service Worker cache controller for offline PWA usage
| Main Interface | Advanced Image Editor |
 |
 |
| AI Roleplay Chat | AI Stories (Webtoon Reader) |
 |
 |
| Gallery & Filters | AI Outpainting |
 |
 |
Show More Screenshots (Click to Expand)
| Cinematic Intro | Model Showcase |
 |
 |
| Chat — Opening Scene | Chat — Story Conclusion |
 |
 |
| Advanced Settings | App Switcher |
 |
 |
| Prompt Preview Module | Settings Panel |
 |
 |
| Gallery Statistics | AI Model Browser |
 |
 |
Thena runs entirely on the client side. No server configuration or database setup is required.
Serving the application via a local HTTP server is required to bypass browser CORS limitations and enable advanced PWA offline caching.
- Clone the repository:
git clone https://github.com/phaticusthiccy/Thena-Web.git
- Launch a server in the root folder:
- Python:
python -m http.server 8000 - NodeJS:
npx http-server -p 8000 - VS Code: Install the Live Server extension and click "Go Live".
- Python:
- Open
http://localhost:8000in your browser.
Simply download the directory and open index.html directly in your browser. Note: Some browser security models may limit IndexedDB access or service worker installs when run from file protocol (file:///).
An API key is required to synthesize images:
- Open the application settings (gear icon ⚙️).
- Click "Get Your Free API Key" to open the associated generation provider bot.
- Paste the returned token into the API Key input.
- The key is securely cached inside the browser's
LocalStorageand is only sent directly to model generation endpoints.
| Technology | Implementation Scope |
|---|---|
| HTML5 | Semantic structure, dynamic template injection, responsive structural components. |
| CSS3 | Premium UI aesthetics, Glassmorphism styles, dark/light theme engines, performance-optimized animations. |
| JavaScript (ES6+) | Native asynchronous flow, Canvas manipulations, modular scripts loader, IndexedDB orchestration. |
| IndexedDB | High-capacity offline storage of images, history states, chat rooms, and custom metadata. |
| Web Audio API | Real-time UI audio generation and sound spatialization. |
| Canvas API | Real-time browser-side cropping, filtering, and scaling adjustments. |
| Service Workers | Prefetching, network caching strategies, and standalone Progressive Web App (PWA) installation. |
Contributions to improve performance, add new feature modules, or refine styling are welcome:
- Fork the repository.
- Create your branch:
git checkout -b feature/amazing-feature - Commit your changes (using Conventional Commits):
git commit -m 'feat: add amazing new feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request.
Distributed under the MIT License. See LICENSE for more information.
