Initial commit: Cleaned and Optimized NanoJason Pro
This commit is contained in:
Gemini AI
41
.gitignore
vendored
Normal file
41
.gitignore
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files (can opt-in for committing if needed)
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
7
.vercelignore
Normal file
7
.vercelignore
Normal file
@@ -0,0 +1,7 @@
|
||||
node_modules
|
||||
build
|
||||
dist
|
||||
.git
|
||||
.trae
|
||||
.log
|
||||
.figma
|
||||
122
README.md
Normal file
122
README.md
Normal file
@@ -0,0 +1,122 @@
|
||||
# 🚀 NanoJason - Universal AI Prompt Language Translator & Optimizer
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<p align="center">
|
||||
<strong>NanoJason</strong> is a revolutionary, offline-only prompt engineering tool that transforms natural language descriptions into optimized Jason format for maximum AI accuracy across all image generation services.
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="#features">🌟 Features</a> •
|
||||
<a href="#getting-started">🚀 Getting Started</a> •
|
||||
<a href="#usage">💡 Usage</a> •
|
||||
<a href="#tech-stack">🛠️ Tech Stack</a> •
|
||||
<a href="#license">📜 License</a>
|
||||
</p>
|
||||
|
||||
---
|
||||
|
||||
## 📸 **App Showcase**
|
||||
|
||||
<div align="center">
|
||||
<img src="https://raw.githubusercontent.com/roman-ryzenadvanced/NanoJasonPro/main/public/screenshots/hero.png" alt="NanoJason Hero" width="800">
|
||||
<p><em>The ultimate prompt engineering dashboard</em></p>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 🌟 **Amazing Features**
|
||||
|
||||
### 🎯 **Three Powerful Modes**
|
||||
|
||||
#### 1. **Jason Translator**
|
||||
- Converts natural language to universal Jason format
|
||||
- Style, mood, character, and item detection
|
||||
- Extracts color palette, composition, and lighting
|
||||
- Perfect for AI image generation compatibility
|
||||
|
||||
#### 2. **NanoPrompt Optimizer**
|
||||
- Deep reverse engineering for maximum AI accuracy
|
||||
- Pattern mapping and keyword enhancement
|
||||
- Quality descriptors and composition optimization
|
||||
- Lighting and color enhancement
|
||||
- Error prevention and artifact reduction
|
||||
- **Accuracy Score:** Up to 95%
|
||||
|
||||
#### 3. **NanoCoder Technical Optimizer**
|
||||
- Specialized for coding and engineering prompts
|
||||
- Technical domain detection (programming, web, mobile, AI, etc.)
|
||||
- Framework and language pattern recognition
|
||||
- Architecture and security optimization
|
||||
- Code context extraction
|
||||
- **Technical Accuracy:** Up to 98%
|
||||
|
||||
### 🔥 **Key Benefits**
|
||||
|
||||
- **🚀 Offline-Only** - No internet connection required
|
||||
- **⚡ Instant Results** - Real-time translation and optimization
|
||||
- **🎨 Universal Compatibility** - Works with all AI image generators
|
||||
- **🔒 Privacy Focused** - No data leaves your device
|
||||
- **📱 Responsive Design** - Perfect for desktop and mobile
|
||||
- **🎯 High Accuracy** - Advanced pattern recognition and optimization
|
||||
- **🔄 Export Options** - Copy, download, and share optimized prompts
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ **Tech Stack**
|
||||
|
||||
- **Framework:** Next.js 14 (App Router)
|
||||
- **Styling:** Tailwind CSS + Shadcn UI
|
||||
- **Icons:** Lucide React
|
||||
- **Language:** TypeScript
|
||||
- **Optimization:** Custom Reverse-Engineered Patterns
|
||||
|
||||
---
|
||||
|
||||
## 🚀 **Getting Started**
|
||||
|
||||
### Prerequisites
|
||||
- Node.js 18+
|
||||
- npm or pnpm
|
||||
|
||||
### Installation
|
||||
|
||||
1. **Clone the repository**
|
||||
```bash
|
||||
git clone https://github.com/roman-ryzenadvanced/NanoJasonPro.git
|
||||
cd NanoJasonPro
|
||||
```
|
||||
|
||||
2. **Install dependencies**
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. **Run the application**
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
4. **Open your browser**
|
||||
```
|
||||
http://localhost:3000
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📜 **License**
|
||||
|
||||
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
||||
|
||||
---
|
||||
|
||||
<div align="center">
|
||||
Developed with ❤️ for the AI Community
|
||||
</div>
|
||||
18
eslint.config.mjs
Normal file
18
eslint.config.mjs
Normal file
@@ -0,0 +1,18 @@
|
||||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||
import nextTs from "eslint-config-next/typescript";
|
||||
|
||||
const eslintConfig = defineConfig([
|
||||
...nextVitals,
|
||||
...nextTs,
|
||||
// Override default ignores of eslint-config-next.
|
||||
globalIgnores([
|
||||
// Default ignores of eslint-config-next:
|
||||
".next/**",
|
||||
"out/**",
|
||||
"build/**",
|
||||
"next-env.d.ts",
|
||||
]),
|
||||
]);
|
||||
|
||||
export default eslintConfig;
|
||||
17
next.config.js
Normal file
17
next.config.js
Normal file
@@ -0,0 +1,17 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
output: 'export',
|
||||
trailingSlash: true,
|
||||
distDir: 'out',
|
||||
images: {
|
||||
unoptimized: true,
|
||||
},
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true,
|
||||
},
|
||||
typescript: {
|
||||
ignoreBuildErrors: true,
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
6125
package-lock.json
generated
Normal file
6125
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
package.json
Normal file
33
package.json
Normal file
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "nanojason",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.453.0",
|
||||
"next": "14.2.15",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"tailwind-merge": "^2.5.4",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.17.0",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-config-next": "14.2.15",
|
||||
"postcss": "^8.4.47",
|
||||
"tailwindcss": "^3.4.14",
|
||||
"typescript": "^5.6.3"
|
||||
}
|
||||
}
|
||||
8
postcss.config.mjs
Normal file
8
postcss.config.mjs
Normal file
@@ -0,0 +1,8 @@
|
||||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
1
public/file.svg
Normal file
1
public/file.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 391 B |
1
public/globe.svg
Normal file
1
public/globe.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
1
public/next.svg
Normal file
1
public/next.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
public/vercel.svg
Normal file
1
public/vercel.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 128 B |
1
public/window.svg
Normal file
1
public/window.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
BIN
src/app/favicon.ico
Normal file
BIN
src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
137
src/app/globals.css
Normal file
137
src/app/globals.css
Normal file
@@ -0,0 +1,137 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 221.2 83.2% 53.3%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 32% 91.4%;
|
||||
--input: 214.3 32% 91.4%;
|
||||
--ring: 221.2 83.2% 53.3%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 217.2 91.2% 59.8%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 224.3 76.3% 48%;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.glass-effect {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent)));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: hsl(var(--primary));
|
||||
color: hsl(var(--primary-foreground));
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
&:hover {
|
||||
background: hsl(var(--primary) / 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: hsl(var(--secondary));
|
||||
color: hsl(var(--secondary-foreground));
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
&:hover {
|
||||
background: hsl(var(--secondary) / 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
0% { transform: translateY(10px); opacity: 0; }
|
||||
100% { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
}
|
||||
31
src/app/layout.tsx
Normal file
31
src/app/layout.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { Header } from "@/components/layout/header";
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-sans",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "NanoJason - AI-Powered Image Series Creation",
|
||||
description: "Create stunning image series with consistent characters and narrative using AI. Transform your ideas into visual stories.",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`${inter.variable} font-sans antialiased`}>
|
||||
<Header />
|
||||
<main className="min-h-screen">
|
||||
{children}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
768
src/app/page.tsx
Normal file
768
src/app/page.tsx
Normal file
@@ -0,0 +1,768 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Copy, Download, Sparkles, Info, FileText } from "lucide-react"
|
||||
import { jasonTranslator, JasonFormat } from "@/services/jason-translator"
|
||||
import { nanoPrompt, NanoPromptResult } from "@/services/nano-prompt"
|
||||
import { nanoCoder, NanoCoderResult } from "@/services/nano-coder"
|
||||
|
||||
|
||||
export default function HomePage() {
|
||||
const [inputText, setInputText] = useState('')
|
||||
const [jasonFormat, setJasonFormat] = useState<JasonFormat | null>(null)
|
||||
const [nanoPromptResult, setNanoPromptResult] = useState<NanoPromptResult | null>(null)
|
||||
const [nanoCoderResult, setNanoCoderResult] = useState<NanoCoderResult | null>(null)
|
||||
const [isTranslating, setIsTranslating] = useState(false)
|
||||
const [isOptimizing, setIsOptimizing] = useState(false)
|
||||
const [isCoding, setIsCoding] = useState(false)
|
||||
const [copied, setCopied] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState<'jason' | 'nano' | 'code'>('jason')
|
||||
|
||||
const handleTranslate = async () => {
|
||||
if (!inputText.trim()) return
|
||||
|
||||
setIsTranslating(true)
|
||||
try {
|
||||
const result = await jasonTranslator.translateToJason(inputText)
|
||||
setJasonFormat(result)
|
||||
setNanoPromptResult(null) // Clear nano prompt result
|
||||
} catch (error) {
|
||||
console.error('Translation failed:', error)
|
||||
} finally {
|
||||
setIsTranslating(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleNanoOptimize = async () => {
|
||||
if (!inputText.trim()) return
|
||||
|
||||
setIsOptimizing(true)
|
||||
try {
|
||||
const result = await nanoPrompt.optimizePrompt(inputText)
|
||||
setNanoPromptResult(result)
|
||||
setJasonFormat(null) // Clear jason format result
|
||||
setNanoCoderResult(null) // Clear nano coder result
|
||||
} catch (error) {
|
||||
console.error('Nano optimization failed:', error)
|
||||
} finally {
|
||||
setIsOptimizing(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleNanoCode = async () => {
|
||||
if (!inputText.trim()) return
|
||||
|
||||
setIsCoding(true)
|
||||
try {
|
||||
const result = await nanoCoder.optimizePrompt(inputText)
|
||||
setNanoCoderResult(result)
|
||||
setJasonFormat(null) // Clear jason format result
|
||||
setNanoPromptResult(null) // Clear nano prompt result
|
||||
} catch (error) {
|
||||
console.error('Nano coding failed:', error)
|
||||
} finally {
|
||||
setIsCoding(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopy = async () => {
|
||||
if (!jasonFormat) return
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(jasonFormat.jason_text)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
} catch (error) {
|
||||
console.error('Failed to copy:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDownload = () => {
|
||||
if (!jasonFormat) return
|
||||
|
||||
const dataStr = JSON.stringify(jasonFormat, null, 2)
|
||||
const dataBlob = new Blob([dataStr], { type: 'application/json' })
|
||||
const url = URL.createObjectURL(dataBlob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = `jason-format-${Date.now()}.json`
|
||||
link.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
const handleCopyNanoPrompt = async () => {
|
||||
if (!nanoPromptResult) return
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(nanoPromptResult.jason_format)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
} catch (error) {
|
||||
console.error('Failed to copy:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDownloadNanoPrompt = () => {
|
||||
if (!nanoPromptResult) return
|
||||
|
||||
const dataStr = JSON.stringify(nanoPromptResult, null, 2)
|
||||
const dataBlob = new Blob([dataStr], { type: 'application/json' })
|
||||
const url = URL.createObjectURL(dataBlob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = `nano-prompt-${Date.now()}.json`
|
||||
link.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
const handleCopyNanoCoder = async () => {
|
||||
if (!nanoCoderResult) return
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(nanoCoderResult.jason_format)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
} catch (error) {
|
||||
console.error('Failed to copy:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDownloadNanoCoder = () => {
|
||||
if (!nanoCoderResult) return
|
||||
|
||||
const dataStr = JSON.stringify(nanoCoderResult, null, 2)
|
||||
const dataBlob = new Blob([dataStr], { type: 'application/json' })
|
||||
const url = URL.createObjectURL(dataBlob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = `nano-coder-${Date.now()}.json`
|
||||
link.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
const quickTemplates = [
|
||||
{ text: "A magical forest with glowing mushrooms and fairies", label: "Fantasy Scene" },
|
||||
{ text: "Futuristic city skyline at sunset with flying cars", label: "Sci-Fi City" },
|
||||
{ text: "Cozy cabin in the woods with warm lights", label: "Peaceful Nature" },
|
||||
{ text: "Dragon breathing fire in a medieval castle", label: "Epic Fantasy" }
|
||||
]
|
||||
|
||||
const nanoQuickTemplates = [
|
||||
{ text: "A beautiful portrait of a woman", label: "Portrait" },
|
||||
{ text: "Mountains at sunset", label: "Landscape" },
|
||||
{ text: "A superhero character", label: "Character" },
|
||||
{ text: "A smartphone product", label: "Product" }
|
||||
]
|
||||
|
||||
const nanoCoderQuickTemplates = [
|
||||
{ text: "React web application with TypeScript", label: "Web App" },
|
||||
{ text: "React Native mobile app", label: "Mobile App" },
|
||||
{ text: "Node.js microservice with REST API", label: "Microservice" },
|
||||
{ text: "REST API with authentication", label: "API" },
|
||||
{ text: "Data visualization dashboard", label: "Dashboard" }
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
|
||||
<div className="container mx-auto px-4 py-8 max-w-6xl">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl md:text-6xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4">
|
||||
NanoJason
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-2">
|
||||
Universal AI Prompt Language Translator & Optimizer
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 max-w-2xl mx-auto">
|
||||
Convert natural language descriptions to Jason format and optimize for maximum AI accuracy
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex justify-center mb-8">
|
||||
<div className="bg-white rounded-full p-1 shadow-lg border border-gray-200">
|
||||
<button
|
||||
onClick={() => setActiveTab('jason')}
|
||||
className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
|
||||
activeTab === 'jason'
|
||||
? 'bg-blue-600 text-white shadow-md'
|
||||
: 'text-gray-600 hover:text-blue-600'
|
||||
}`}
|
||||
>
|
||||
Jason Translator
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('nano')}
|
||||
className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
|
||||
activeTab === 'nano'
|
||||
? 'bg-purple-600 text-white shadow-md'
|
||||
: 'text-gray-600 hover:text-purple-600'
|
||||
}`}
|
||||
>
|
||||
NanoPrompt
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('code')}
|
||||
className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
|
||||
activeTab === 'code'
|
||||
? 'bg-green-600 text-white shadow-md'
|
||||
: 'text-gray-600 hover:text-green-600'
|
||||
}`}
|
||||
>
|
||||
NanoCoder
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Jason Translator */}
|
||||
{activeTab === 'jason' && (
|
||||
<Card className="mb-12 border-2 border-blue-200 shadow-xl">
|
||||
<CardHeader className="bg-gradient-to-r from-blue-50 to-purple-50">
|
||||
<CardTitle className="flex items-center gap-2 text-2xl">
|
||||
<Sparkles className="h-6 w-6 text-blue-600" />
|
||||
Jason Language Translator
|
||||
</CardTitle>
|
||||
<CardDescription className="text-lg">
|
||||
Describe what you want to create, and I'll convert it to universal Jason format
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6 p-6">
|
||||
{/* Quick Templates */}
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-700 mb-3">Quick Templates:</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||
{quickTemplates.map((template, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setInputText(template.text)}
|
||||
className="text-xs h-auto py-2 px-3 whitespace-normal text-left"
|
||||
>
|
||||
{template.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Describe your image:
|
||||
</label>
|
||||
<textarea
|
||||
value={inputText}
|
||||
onChange={(e) => setInputText(e.target.value)}
|
||||
placeholder="A beautiful landscape with mountains and a lake at sunset..."
|
||||
className="min-h-32 border-2 border-gray-200 focus:border-blue-400 rounded-lg p-3 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Translate Button */}
|
||||
<Button
|
||||
onClick={handleTranslate}
|
||||
disabled={!inputText.trim() || isTranslating}
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold py-3 text-lg"
|
||||
>
|
||||
{isTranslating ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
||||
Translating...
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5" />
|
||||
Translate to Jason Format
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* Results */}
|
||||
{jasonFormat && (
|
||||
<div className="space-y-4 mt-6">
|
||||
<div className="bg-gradient-to-r from-green-50 to-blue-50 border-2 border-green-200 rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h4 className="font-semibold text-green-800 flex items-center gap-2">
|
||||
<FileText className="h-5 w-5" />
|
||||
Jason Format Result
|
||||
</h4>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={handleCopy}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-xs"
|
||||
>
|
||||
{copied ? (
|
||||
<span className="flex items-center gap-1 text-green-600">
|
||||
<span className="w-3 h-3 bg-green-600 rounded-full"></span>
|
||||
Copied!
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-1">
|
||||
<Copy className="h-3 w-3" />
|
||||
Copy
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleDownload}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-xs"
|
||||
>
|
||||
<Download className="h-3 w-3 mr-1" />
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-3 border border-gray-200">
|
||||
<pre className="text-sm text-gray-800 whitespace-pre-wrap break-words">
|
||||
{JSON.stringify(jasonFormat, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Format Info */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<h5 className="font-semibold text-blue-800 mb-2 flex items-center gap-2">
|
||||
<Info className="h-4 w-4" />
|
||||
About Jason Format
|
||||
</h5>
|
||||
<p className="text-sm text-blue-700">
|
||||
Jason is a universal prompt language that works with all AI image generators.
|
||||
It includes detailed style, mood, character, and item information for consistent results.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Style Badges */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{jasonFormat.style && (
|
||||
<span className="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">
|
||||
Style: {jasonFormat.style}
|
||||
</span>
|
||||
)}
|
||||
{jasonFormat.mood && (
|
||||
<span className="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">
|
||||
Mood: {jasonFormat.mood}
|
||||
</span>
|
||||
)}
|
||||
{jasonFormat.characters && jasonFormat.characters.length > 0 && (
|
||||
<span className="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">
|
||||
Characters: {jasonFormat.characters.join(', ')}
|
||||
</span>
|
||||
)}
|
||||
{jasonFormat.items && jasonFormat.items.length > 0 && (
|
||||
<span className="bg-orange-100 text-orange-800 px-2 py-1 rounded text-xs">
|
||||
Items: {jasonFormat.items.join(', ')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* NanoPrompt Optimizer */}
|
||||
{activeTab === 'nano' && (
|
||||
<Card className="mb-12 border-2 border-purple-200 shadow-xl">
|
||||
<CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50">
|
||||
<CardTitle className="flex items-center gap-2 text-2xl">
|
||||
<Sparkles className="h-6 w-6 text-purple-600" />
|
||||
NanoPrompt Optimizer
|
||||
</CardTitle>
|
||||
<CardDescription className="text-lg">
|
||||
Deep reverse engineering for maximum AI accuracy and performance
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6 p-6">
|
||||
{/* Quick Templates */}
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-700 mb-3">Quick Templates:</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||
{nanoQuickTemplates.map((template, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setInputText(template.text)}
|
||||
className="text-xs h-auto py-2 px-3 whitespace-normal text-left"
|
||||
>
|
||||
{template.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Enter your English prompt:
|
||||
</label>
|
||||
<textarea
|
||||
value={inputText}
|
||||
onChange={(e) => setInputText(e.target.value)}
|
||||
placeholder="A beautiful portrait of a woman..."
|
||||
className="min-h-32 border-2 border-gray-200 focus:border-purple-400 rounded-lg p-3 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Optimize Button */}
|
||||
<Button
|
||||
onClick={handleNanoOptimize}
|
||||
disabled={!inputText.trim() || isOptimizing}
|
||||
className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-3 text-lg"
|
||||
>
|
||||
{isOptimizing ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
||||
Optimizing...
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5" />
|
||||
Optimize with NanoPrompt
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* Results */}
|
||||
{nanoPromptResult && (
|
||||
<div className="space-y-4 mt-6">
|
||||
<div className="bg-gradient-to-r from-purple-50 to-pink-50 border-2 border-purple-200 rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h4 className="font-semibold text-purple-800 flex items-center gap-2">
|
||||
<FileText className="h-5 w-5" />
|
||||
NanoPrompt Optimization Result
|
||||
</h4>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={() => handleCopyNanoPrompt()}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-xs"
|
||||
>
|
||||
{copied ? (
|
||||
<span className="flex items-center gap-1 text-green-600">
|
||||
<span className="w-3 h-3 bg-green-600 rounded-full"></span>
|
||||
Copied!
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-1">
|
||||
<Copy className="h-3 w-3" />
|
||||
Copy
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleDownloadNanoPrompt()}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-xs"
|
||||
>
|
||||
<Download className="h-3 w-3 mr-1" />
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Score */}
|
||||
<div className="bg-white rounded-lg p-3 border border-gray-200 mb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-gray-700">Accuracy Score:</span>
|
||||
<span className="text-lg font-bold text-green-600">{nanoPromptResult.accuracy_score}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Original vs Optimized */}
|
||||
<div className="grid md:grid-cols-2 gap-3 mb-3">
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 font-medium mb-1">Original:</div>
|
||||
<div className="bg-gray-50 rounded p-2 text-sm text-gray-800">
|
||||
{nanoPromptResult.original_prompt}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 font-medium mb-1">Optimized:</div>
|
||||
<div className="bg-purple-50 rounded p-2 text-sm text-purple-800">
|
||||
{nanoPromptResult.nano_prompt}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Optimizations Applied */}
|
||||
<div className="mb-3">
|
||||
<div className="text-xs text-gray-500 font-medium mb-1">Optimizations Applied:</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{nanoPromptResult.optimizations_applied.map((opt, index) => (
|
||||
<span key={index} className="bg-purple-100 text-purple-700 text-xs px-2 py-1 rounded">
|
||||
{opt}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Performance Tips */}
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 font-medium mb-1">Performance Tips:</div>
|
||||
<ul className="text-xs text-gray-700 space-y-1">
|
||||
{nanoPromptResult.performance_tips.map((tip, index) => (
|
||||
<li key={index} className="flex items-start gap-1">
|
||||
<span className="w-1 h-1 bg-purple-600 rounded-full mt-2 flex-shrink-0"></span>
|
||||
{tip}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Jason Format */}
|
||||
<div className="bg-gradient-to-r from-blue-50 to-purple-50 border-2 border-blue-200 rounded-lg p-4">
|
||||
<h5 className="font-semibold text-blue-800 mb-2 flex items-center gap-2">
|
||||
<Info className="h-4 w-4" />
|
||||
Optimized Jason Format
|
||||
</h5>
|
||||
<div className="bg-white rounded-lg p-3 border border-gray-200">
|
||||
<pre className="text-sm text-gray-800 whitespace-pre-wrap break-words">
|
||||
{nanoPromptResult.jason_format}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* NanoCoder Optimizer */}
|
||||
{activeTab === 'code' && (
|
||||
<Card className="mb-12 border-2 border-green-200 shadow-xl">
|
||||
<CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50">
|
||||
<CardTitle className="flex items-center gap-2 text-2xl">
|
||||
<Sparkles className="h-6 w-6 text-green-600" />
|
||||
NanoCoder Technical Optimizer
|
||||
</CardTitle>
|
||||
<CardDescription className="text-lg">
|
||||
Deep reverse engineering for maximum coding and engineering accuracy
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6 p-6">
|
||||
{/* Quick Templates */}
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-700 mb-3">Technical Templates:</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-2">
|
||||
{nanoCoderQuickTemplates.map((template, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setInputText(template.text)}
|
||||
className="text-xs h-auto py-2 px-3 whitespace-normal text-left"
|
||||
>
|
||||
{template.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Enter your technical prompt:
|
||||
</label>
|
||||
<textarea
|
||||
value={inputText}
|
||||
onChange={(e) => setInputText(e.target.value)}
|
||||
placeholder="React web application with TypeScript..."
|
||||
className="min-h-32 border-2 border-gray-200 focus:border-green-400 rounded-lg p-3 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Optimize Button */}
|
||||
<Button
|
||||
onClick={handleNanoCode}
|
||||
disabled={!inputText.trim() || isCoding}
|
||||
className="w-full bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white font-semibold py-3 text-lg"
|
||||
>
|
||||
{isCoding ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
||||
Optimizing...
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5" />
|
||||
Optimize with NanoCoder
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* Results */}
|
||||
{nanoCoderResult && (
|
||||
<div className="space-y-4 mt-6">
|
||||
<div className="bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h4 className="font-semibold text-green-800 flex items-center gap-2">
|
||||
<FileText className="h-5 w-5" />
|
||||
NanoCoder Technical Result
|
||||
</h4>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={() => handleCopyNanoCoder()}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-xs"
|
||||
>
|
||||
{copied ? (
|
||||
<span className="flex items-center gap-1 text-green-600">
|
||||
<span className="w-3 h-3 bg-green-600 rounded-full"></span>
|
||||
Copied!
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-1">
|
||||
<Copy className="h-3 w-3" />
|
||||
Copy
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleDownloadNanoCoder()}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-xs"
|
||||
>
|
||||
<Download className="h-3 w-3 mr-1" />
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Score */}
|
||||
<div className="bg-white rounded-lg p-3 border border-gray-200 mb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-gray-700">Technical Accuracy:</span>
|
||||
<span className="text-lg font-bold text-green-600">{nanoCoderResult.accuracy_score}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Original vs Optimized */}
|
||||
<div className="grid md:grid-cols-2 gap-3 mb-3">
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 font-medium mb-1">Original:</div>
|
||||
<div className="bg-gray-50 rounded p-2 text-sm text-gray-800">
|
||||
{nanoCoderResult.original_prompt}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 font-medium mb-1">Technical:</div>
|
||||
<div className="bg-green-50 rounded p-2 text-sm text-green-800">
|
||||
{nanoCoderResult.nano_coder_prompt}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Technical Specifications */}
|
||||
<div className="mb-3">
|
||||
<div className="text-xs text-gray-500 font-medium mb-1">Technical Specifications:</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{nanoCoderResult.technical_specifications.map((spec, index) => (
|
||||
<span key={index} className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded">
|
||||
{spec}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Code Context */}
|
||||
{nanoCoderResult.code_context.length > 0 && (
|
||||
<div className="mb-3">
|
||||
<div className="text-xs text-gray-500 font-medium mb-1">Code Context:</div>
|
||||
<div className="bg-blue-50 rounded p-2 text-xs text-blue-800">
|
||||
{nanoCoderResult.code_context.join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Performance Tips */}
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 font-medium mb-1">Technical Tips:</div>
|
||||
<ul className="text-xs text-gray-700 space-y-1">
|
||||
{nanoCoderResult.performance_tips.map((tip, index) => (
|
||||
<li key={index} className="flex items-start gap-1">
|
||||
<span className="w-1 h-1 bg-green-600 rounded-full mt-2 flex-shrink-0"></span>
|
||||
{tip}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Technical Jason Format */}
|
||||
<div className="bg-gradient-to-r from-blue-50 to-green-50 border-2 border-blue-200 rounded-lg p-4">
|
||||
<h5 className="font-semibold text-blue-800 mb-2 flex items-center gap-2">
|
||||
<Info className="h-4 w-4" />
|
||||
Technical Jason Format
|
||||
</h5>
|
||||
<div className="bg-white rounded-lg p-3 border border-gray-200">
|
||||
<pre className="text-sm text-gray-800 whitespace-pre-wrap break-words">
|
||||
{nanoCoderResult.jason_format}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Developer Section */}
|
||||
<div className="mt-16 text-center py-8 border-t border-gray-200">
|
||||
<div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-6 max-w-4xl mx-auto">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">Developed by Roman | RyzenAdvanced</h3>
|
||||
<div className="flex flex-col md:flex-row justify-center items-center gap-6 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">GitHub:</span>
|
||||
<a
|
||||
href="https://github.com/roman-ryzenadvanced/Custom-Engineered-Agents-and-Tools-for-Vibe-Coders"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-800 underline"
|
||||
>
|
||||
Custom Engineered Agents and Tools for Vibe Coders
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">Tools:</span>
|
||||
<a
|
||||
href="https://z.ai/subscribe?ic=R0K78RJKNW"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-green-600 hover:text-green-800 underline"
|
||||
>
|
||||
GLM 4.6 Coding Model
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">Built with:</span>
|
||||
<a
|
||||
href="https://www.trae.ai/s/WJtxyE"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-purple-600 hover:text-purple-800 underline"
|
||||
>
|
||||
TRAE IDE
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
76
src/components/layout/footer.tsx
Normal file
76
src/components/layout/footer.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { Sparkles, Github, Twitter, Mail } from "lucide-react"
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="border-t bg-white">
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Sparkles className="h-6 w-6 bg-gradient-to-r from-blue-600 to-purple-600" />
|
||||
<span className="font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">NanoJason</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">
|
||||
Transform your ideas into stunning visual stories with AI-powered image generation.
|
||||
</p>
|
||||
<div className="flex space-x-4">
|
||||
<a href="#" className="text-gray-600 hover:text-gray-900">
|
||||
<Github className="h-4 w-4" />
|
||||
<span className="sr-only">GitHub</span>
|
||||
</a>
|
||||
<a href="#" className="text-gray-600 hover:text-gray-900">
|
||||
<Twitter className="h-4 w-4" />
|
||||
<span className="sr-only">Twitter</span>
|
||||
</a>
|
||||
<a href="#" className="text-gray-600 hover:text-gray-900">
|
||||
<Mail className="h-4 w-4" />
|
||||
<span className="sr-only">Email</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-sm font-semibold">Product</h4>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li><a href="#" className="hover:text-gray-900">Features</a></li>
|
||||
<li><a href="#" className="hover:text-gray-900">Gallery</a></li>
|
||||
<li><a href="#" className="hover:text-gray-900">API</a></li>
|
||||
<li><a href="#" className="hover:text-gray-900">Pricing</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-sm font-semibold">Resources</h4>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li><a href="#" className="hover:text-gray-900">Documentation</a></li>
|
||||
<li><a href="#" className="hover:text-gray-900">Tutorials</a></li>
|
||||
<li><a href="#" className="hover:text-gray-900">Blog</a></li>
|
||||
<li><a href="#" className="hover:text-gray-900">Community</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-sm font-semibold">Company</h4>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li><a href="#" className="hover:text-gray-900">About</a></li>
|
||||
<li><a href="#" className="hover:text-gray-900">Contact</a></li>
|
||||
<li><a href="#" className="hover:text-gray-900">Privacy</a></li>
|
||||
<li><a href="#" className="hover:text-gray-900">Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-gray-200">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||
<p className="text-sm text-gray-600">
|
||||
© 2024 NanoJason. All rights reserved.
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 mt-2 md:mt-0">
|
||||
Powered by Qwen AI and Next.js
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
59
src/components/layout/header.tsx
Normal file
59
src/components/layout/header.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
'use client'
|
||||
|
||||
import Link from "next/link"
|
||||
import { Sparkles, Github, FileText } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<header className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
|
||||
<div className="container mx-auto px-4 h-16 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="h-6 w-6 text-blue-600" />
|
||||
<Link href="/" className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||
NanoJason
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-6">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-gray-600 hover:text-blue-600 transition-colors font-medium"
|
||||
>
|
||||
Translator
|
||||
</Link>
|
||||
<Link
|
||||
href="https://github.com/your-username/nanojason"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-600 hover:text-blue-600 transition-colors font-medium flex items-center gap-1"
|
||||
>
|
||||
<Github className="h-4 w-4" />
|
||||
GitHub
|
||||
</Link>
|
||||
<Link
|
||||
href="https://jasonformat.org/docs"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-600 hover:text-blue-600 transition-colors font-medium flex items-center gap-1"
|
||||
>
|
||||
<FileText className="h-4 w-4" />
|
||||
Docs
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
<Link href="/">
|
||||
Get Started
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
56
src/components/ui/button.tsx
Normal file
56
src/components/ui/button.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-blue-600 text-white hover:bg-blue-700",
|
||||
destructive:
|
||||
"bg-red-600 text-white hover:bg-red-700",
|
||||
outline:
|
||||
"border border-gray-300 bg-white hover:bg-gray-50 hover:text-gray-900",
|
||||
secondary:
|
||||
"bg-gray-100 text-gray-900 hover:bg-gray-200",
|
||||
ghost: "hover:bg-gray-100 hover:text-gray-900",
|
||||
link: "text-blue-600 underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Button.displayName = "Button"
|
||||
|
||||
export { Button, buttonVariants }
|
||||
79
src/components/ui/card.tsx
Normal file
79
src/components/ui/card.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Card = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-lg border border-gray-200 bg-white text-gray-900 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Card.displayName = "Card"
|
||||
|
||||
const CardHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardHeader.displayName = "CardHeader"
|
||||
|
||||
const CardTitle = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLHeadingElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<h3
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-2xl font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardTitle.displayName = "CardTitle"
|
||||
|
||||
const CardDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<p
|
||||
ref={ref}
|
||||
className={cn("text-sm text-gray-600", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardDescription.displayName = "CardDescription"
|
||||
|
||||
const CardContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
))
|
||||
CardContent.displayName = "CardContent"
|
||||
|
||||
const CardFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex items-center p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardFooter.displayName = "CardFooter"
|
||||
|
||||
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
||||
25
src/components/ui/input.tsx
Normal file
25
src/components/ui/input.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export interface InputProps
|
||||
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Input.displayName = "Input"
|
||||
|
||||
export { Input }
|
||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { type ClassValue, clsx } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
262
src/services/jason-translator.ts
Normal file
262
src/services/jason-translator.ts
Normal file
@@ -0,0 +1,262 @@
|
||||
// Jason Language Translator - Offline-only version
|
||||
// Converts natural language to Jason format for universal AI compatibility
|
||||
|
||||
export interface JasonFormat {
|
||||
jason_text: string
|
||||
style: string
|
||||
mood: string
|
||||
characters: string[]
|
||||
items: string[]
|
||||
setting?: string
|
||||
action?: string
|
||||
color_palette?: string[]
|
||||
composition?: string
|
||||
lighting?: string
|
||||
quality?: string
|
||||
}
|
||||
|
||||
export class JasonTranslator {
|
||||
// Style detection patterns
|
||||
private stylePatterns = {
|
||||
realistic: ['photo', 'realistic', 'photograph', 'lifelike', 'real', 'actual'],
|
||||
anime: ['anime', 'manga', 'japanese', 'studio ghibli', 'akira', 'naruto'],
|
||||
fantasy: ['fantasy', 'magical', 'dragon', 'wizard', 'elf', 'fairy', 'mythical'],
|
||||
scifi: ['sci-fi', 'futuristic', 'cyberpunk', 'space', 'robot', 'alien', 'technology'],
|
||||
cartoon: ['cartoon', 'disney', 'pixar', 'animated', 'character', 'funny'],
|
||||
oil: ['oil painting', 'canvas', 'brushstrokes', 'classical', 'renaissance'],
|
||||
watercolor: ['watercolor', 'watercolor painting', 'soft', 'flowing', 'transparent'],
|
||||
pixel: ['pixel art', '8-bit', '16-bit', 'retro', 'pixelated', 'minecraft'],
|
||||
abstract: ['abstract', 'geometric', 'shapes', 'patterns', 'modern art'],
|
||||
vintage: ['vintage', 'retro', 'old', 'antique', 'classic', '1950s', '1960s'],
|
||||
minimal: ['minimal', 'simple', 'clean', 'minimalist', 'basic'],
|
||||
detailed: ['detailed', 'intricate', 'complex', 'elaborate', 'fine details']
|
||||
}
|
||||
|
||||
// Mood detection patterns
|
||||
private moodPatterns = {
|
||||
happy: ['happy', 'joyful', 'cheerful', 'smiling', 'bright', 'sunny'],
|
||||
sad: ['sad', 'melancholy', 'somber', 'gloomy', 'depressed', 'tears'],
|
||||
epic: ['epic', 'dramatic', 'heroic', 'grand', 'massive', 'breathtaking'],
|
||||
peaceful: ['peaceful', 'calm', 'serene', 'tranquil', 'quiet', 'relaxing'],
|
||||
mysterious: ['mysterious', 'foggy', 'dark', 'hidden', 'secret', 'enigmatic'],
|
||||
energetic: ['energetic', 'dynamic', 'action', 'movement', 'fast', 'powerful'],
|
||||
romantic: ['romantic', 'love', 'heart', 'candlelight', 'intimate', 'passionate'],
|
||||
scary: ['scary', 'horror', 'creepy', 'dark', 'fear', 'terror']
|
||||
}
|
||||
|
||||
// Character detection patterns
|
||||
private characterPatterns = [
|
||||
'person', 'man', 'woman', 'child', 'boy', 'girl', 'baby',
|
||||
'wizard', 'witch', 'dragon', 'knight', 'princess', 'king', 'queen',
|
||||
'robot', 'alien', 'cyborg', 'monster', 'ghost', 'vampire',
|
||||
'animal', 'cat', 'dog', 'bird', 'lion', 'tiger', 'elephant',
|
||||
'fairy', 'elf', 'dwarf', 'orc', 'angel', 'demon'
|
||||
]
|
||||
|
||||
// Item detection patterns
|
||||
private itemPatterns = [
|
||||
'sword', 'shield', 'armor', 'crown', 'wand', 'staff', 'book',
|
||||
'car', 'airplane', 'boat', 'ship', 'train', 'bicycle',
|
||||
'house', 'castle', 'building', 'tower', 'bridge', 'road',
|
||||
'tree', 'flower', 'mountain', 'river', 'lake', 'ocean',
|
||||
'computer', 'phone', 'tablet', 'camera', 'television', 'game',
|
||||
'food', 'pizza', 'cake', 'coffee', 'wine', 'fruit'
|
||||
]
|
||||
|
||||
async translateToJason(text: string): Promise<JasonFormat> {
|
||||
const lowerText = text.toLowerCase()
|
||||
|
||||
return {
|
||||
jason_text: this.createJasonText(text),
|
||||
style: this.detectStyle(lowerText),
|
||||
mood: this.detectMood(lowerText),
|
||||
characters: this.detectCharacters(lowerText),
|
||||
items: this.detectItems(lowerText),
|
||||
setting: this.extractSetting(lowerText),
|
||||
action: this.extractAction(lowerText),
|
||||
color_palette: this.extractColors(lowerText),
|
||||
composition: this.extractComposition(lowerText),
|
||||
lighting: this.extractLighting(lowerText),
|
||||
quality: 'high'
|
||||
}
|
||||
}
|
||||
|
||||
private createJasonText(text: string): string {
|
||||
const jasonStructure = {
|
||||
prompt: text,
|
||||
version: '1.0',
|
||||
type: 'image_generation',
|
||||
metadata: {
|
||||
created_by: 'NanoJason',
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
}
|
||||
|
||||
return JSON.stringify(jasonStructure, null, 2)
|
||||
}
|
||||
|
||||
private detectStyle(text: string): string {
|
||||
for (const [style, patterns] of Object.entries(this.stylePatterns)) {
|
||||
if (patterns.some(pattern => text.includes(pattern))) {
|
||||
return style
|
||||
}
|
||||
}
|
||||
return 'realistic' // Default style
|
||||
}
|
||||
|
||||
private detectMood(text: string): string {
|
||||
for (const [mood, patterns] of Object.entries(this.moodPatterns)) {
|
||||
if (patterns.some(pattern => text.includes(pattern))) {
|
||||
return mood
|
||||
}
|
||||
}
|
||||
return 'neutral' // Default mood
|
||||
}
|
||||
|
||||
private detectCharacters(text: string): string[] {
|
||||
const foundCharacters: string[] = []
|
||||
|
||||
for (const character of this.characterPatterns) {
|
||||
if (text.includes(character)) {
|
||||
foundCharacters.push(character)
|
||||
}
|
||||
}
|
||||
|
||||
return foundCharacters.slice(0, 5) // Limit to 5 characters
|
||||
}
|
||||
|
||||
private detectItems(text: string): string[] {
|
||||
const foundItems: string[] = []
|
||||
|
||||
for (const item of this.itemPatterns) {
|
||||
if (text.includes(item)) {
|
||||
foundItems.push(item)
|
||||
}
|
||||
}
|
||||
|
||||
return foundItems.slice(0, 8) // Limit to 8 items
|
||||
}
|
||||
|
||||
private extractSetting(text: string): string | undefined {
|
||||
const settingPatterns = [
|
||||
'forest', 'city', 'beach', 'mountain', 'desert', 'ocean',
|
||||
'space', 'underwater', 'cave', 'castle', 'house', 'garden',
|
||||
'street', 'office', 'school', 'hospital', 'restaurant', 'park'
|
||||
]
|
||||
|
||||
for (const setting of settingPatterns) {
|
||||
if (text.includes(setting)) {
|
||||
return setting
|
||||
}
|
||||
}
|
||||
|
||||
return undefined
|
||||
}
|
||||
|
||||
private extractAction(text: string): string | undefined {
|
||||
const actionPatterns = [
|
||||
'running', 'walking', 'sitting', 'standing', 'flying', 'swimming',
|
||||
'fighting', 'dancing', 'singing', 'reading', 'writing', 'cooking',
|
||||
'sleeping', 'playing', 'working', 'traveling', 'exploring', 'building'
|
||||
]
|
||||
|
||||
for (const action of actionPatterns) {
|
||||
if (text.includes(action)) {
|
||||
return action
|
||||
}
|
||||
}
|
||||
|
||||
return undefined
|
||||
}
|
||||
|
||||
private extractColors(text: string): string[] {
|
||||
const colorPatterns = [
|
||||
'red', 'blue', 'green', 'yellow', 'orange', 'purple', 'pink',
|
||||
'black', 'white', 'gray', 'brown', 'gold', 'silver',
|
||||
'cyan', 'magenta', 'lime', 'navy', 'teal', 'indigo'
|
||||
]
|
||||
|
||||
const foundColors: string[] = []
|
||||
|
||||
for (const color of colorPatterns) {
|
||||
if (text.includes(color)) {
|
||||
foundColors.push(color)
|
||||
}
|
||||
}
|
||||
|
||||
return foundColors.slice(0, 6) // Limit to 6 colors
|
||||
}
|
||||
|
||||
private extractComposition(text: string): string | undefined {
|
||||
const compositionPatterns = [
|
||||
'portrait', 'landscape', 'close-up', 'wide shot', 'aerial view',
|
||||
'macro', 'panorama', 'bird\'s eye view', 'low angle', 'high angle'
|
||||
]
|
||||
|
||||
for (const composition of compositionPatterns) {
|
||||
if (text.includes(composition)) {
|
||||
return composition
|
||||
}
|
||||
}
|
||||
|
||||
return undefined
|
||||
}
|
||||
|
||||
private extractLighting(text: string): string | undefined {
|
||||
const lightingPatterns = [
|
||||
'sunlight', 'moonlight', 'sunrise', 'sunset', 'dawn', 'dusk',
|
||||
'neon', 'candlelight', 'spotlight', 'natural', 'artificial',
|
||||
'bright', 'dark', 'dim', 'glowing', 'shadows'
|
||||
]
|
||||
|
||||
for (const lighting of lightingPatterns) {
|
||||
if (text.includes(lighting)) {
|
||||
return lighting
|
||||
}
|
||||
}
|
||||
|
||||
return undefined
|
||||
}
|
||||
|
||||
// Quick template generators
|
||||
generateQuickTemplate(type: 'portrait' | 'landscape' | 'action' | 'fantasy' | 'sci-fi'): string {
|
||||
const templates = {
|
||||
portrait: 'A detailed portrait of a person with expressive eyes and soft lighting',
|
||||
landscape: 'A beautiful landscape with mountains, trees, and dramatic lighting',
|
||||
action: 'An action scene with dynamic movement and intense emotions',
|
||||
fantasy: 'A magical fantasy scene with mystical creatures and enchanted elements',
|
||||
'sci-fi': 'A futuristic sci-fi scene with advanced technology and alien worlds'
|
||||
}
|
||||
|
||||
return templates[type]
|
||||
}
|
||||
|
||||
// Validate Jason format
|
||||
validateJasonFormat(format: JasonFormat): { isValid: boolean; errors: string[] } {
|
||||
const errors: string[] = []
|
||||
|
||||
if (!format.jason_text || format.jason_text.trim() === '') {
|
||||
errors.push('Jason text is required')
|
||||
}
|
||||
|
||||
if (!format.style) {
|
||||
errors.push('Style is required')
|
||||
}
|
||||
|
||||
if (!format.mood) {
|
||||
errors.push('Mood is required')
|
||||
}
|
||||
|
||||
if (!format.characters || format.characters.length === 0) {
|
||||
errors.push('At least one character is recommended')
|
||||
}
|
||||
|
||||
return {
|
||||
isValid: errors.length === 0,
|
||||
errors
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Create singleton instance
|
||||
export const jasonTranslator = new JasonTranslator()
|
||||
315
src/services/nano-coder.ts
Normal file
315
src/services/nano-coder.ts
Normal file
@@ -0,0 +1,315 @@
|
||||
// NanoCoder - Deep Reverse Engineered Jason Prompt Optimizer for Coding/Engineering
|
||||
// Translates coding/engineering requests into optimized Jason prompts for maximum AI accuracy
|
||||
|
||||
export interface NanoCoderResult {
|
||||
original_prompt: string
|
||||
nano_coder_prompt: string
|
||||
jason_format: string
|
||||
technical_specifications: string[]
|
||||
accuracy_score: number
|
||||
performance_tips: string[]
|
||||
code_context: string[]
|
||||
}
|
||||
|
||||
export class NanoCoder {
|
||||
// Technical programming patterns
|
||||
private technicalPatterns = {
|
||||
// Software development
|
||||
programming: ['code', 'algorithm', 'function', 'class', 'method', 'variable', 'array', 'object', 'loop', 'conditional', 'recursion', 'data structure', 'API', 'framework', 'library', 'dependency'],
|
||||
|
||||
// System architecture
|
||||
architecture: ['microservice', 'monolith', 'serverless', 'container', 'docker', 'kubernetes', 'architecture', 'design pattern', 'scalability', 'performance', 'security', 'reliability'],
|
||||
|
||||
// Web development
|
||||
webdev: ['frontend', 'backend', 'fullstack', 'React', 'Vue', 'Angular', 'Node.js', 'Python', 'JavaScript', 'TypeScript', 'HTML', 'CSS', 'database', 'REST', 'GraphQL', 'SPA'],
|
||||
|
||||
// Mobile development
|
||||
mobile: ['iOS', 'Android', 'React Native', 'Flutter', 'Xamarin', 'mobile app', 'cross-platform', 'native', 'responsive', 'touch interface'],
|
||||
|
||||
// DevOps
|
||||
devops: ['CI/CD', 'pipeline', 'deployment', 'testing', 'monitoring', 'logging', 'analytics', 'automation', 'infrastructure as code', 'terraform'],
|
||||
|
||||
// Data & AI
|
||||
dataai: ['machine learning', 'neural network', 'deep learning', 'training data', 'model', 'dataset', 'feature engineering', 'hyperparameters', 'inference'],
|
||||
|
||||
// Quality & Testing
|
||||
quality: ['unit test', 'integration test', 'end-to-end test', 'debugging', 'refactoring', 'code review', 'performance test', 'load test', 'stress test'],
|
||||
|
||||
// Security
|
||||
security: ['authentication', 'authorization', 'encryption', 'firewall', 'vulnerability', 'patch', 'compliance', 'security audit', 'penetration testing'],
|
||||
|
||||
// Performance
|
||||
performance: ['optimization', 'caching', 'lazy loading', 'asynchronous', 'concurrency', 'threading', 'memory management', 'garbage collection']
|
||||
}
|
||||
|
||||
// Technical optimization keywords
|
||||
private technicalOptimizations = {
|
||||
quality: [
|
||||
'clean code', 'SOLID principles', 'DRY', 'KISS', 'best practices', 'technical debt',
|
||||
'readability', 'maintainability', 'scalability', 'extensibility', 'modularity'
|
||||
],
|
||||
performance: [
|
||||
'high-performance', 'efficient', 'optimized', 'fast', 'low-latency', 'high-throughput',
|
||||
'responsive', 'asynchronous', 'parallel processing', 'caching strategy'
|
||||
],
|
||||
architecture: [
|
||||
'well-architected', 'distributed', 'cloud-native', 'event-driven', 'microservices',
|
||||
'service-oriented', 'domain-driven', 'clean architecture', 'hexagonal'
|
||||
],
|
||||
security: [
|
||||
'secure by design', 'zero-trust', 'encrypted', 'authenticated', 'authorized',
|
||||
'compliant', 'auditable', 'secure coding', 'OWASP standards'
|
||||
],
|
||||
testing: [
|
||||
'test-driven', 'behavior-driven', 'continuous integration', 'automated testing',
|
||||
'test coverage', 'mocking', 'stubbing', 'integration testing'
|
||||
]
|
||||
}
|
||||
|
||||
// Code-specific enhancement patterns
|
||||
private codePatterns = {
|
||||
languages: {
|
||||
javascript: ['ES6+', 'async/await', 'promises', 'modules', 'destructuring', 'arrow functions'],
|
||||
typescript: ['strong typing', 'interfaces', 'generics', 'type guards', 'decorators'],
|
||||
python: ['dynamic typing', 'list comprehensions', 'decorators', 'generators', 'asyncio'],
|
||||
java: ['OOP', 'interfaces', 'abstract classes', 'generics', 'concurrency'],
|
||||
rust: ['memory safety', 'borrow checker', 'zero-cost abstractions', 'concurrency'],
|
||||
go: ['concurrent', 'interfaces', 'goroutines', 'channels', 'garbage collector']
|
||||
},
|
||||
frameworks: {
|
||||
react: ['components', 'hooks', 'state management', 'virtual DOM', 'React Fiber'],
|
||||
vue: ['progressive framework', 'single file components', 'composition API', 'reactivity'],
|
||||
angular: ['dependency injection', 'modules', 'decorators', 'change detection'],
|
||||
node: ['event-driven', 'non-blocking', 'NPM', 'ECMAScript'],
|
||||
django: ['MVT', 'ORM', 'admin interface', 'template engine'],
|
||||
spring: ['dependency injection', 'AOP', 'transaction management', 'security']
|
||||
}
|
||||
}
|
||||
|
||||
async optimizePrompt(technicalPrompt: string): Promise<NanoCoderResult> {
|
||||
const technical_specifications: string[] = []
|
||||
let optimizedPrompt = technicalPrompt.toLowerCase()
|
||||
|
||||
// Step 1: Detect technical domain
|
||||
const domain = this.detectTechnicalDomain(optimizedPrompt)
|
||||
if (domain) {
|
||||
optimizedPrompt = this.enhanceTechnicalDomain(optimizedPrompt, domain, technical_specifications)
|
||||
}
|
||||
|
||||
// Step 2: Apply technical patterns
|
||||
optimizedPrompt = this.applyTechnicalPatterns(optimizedPrompt, technical_specifications)
|
||||
|
||||
// Step 3: Add technical optimizations
|
||||
optimizedPrompt = this.addTechnicalOptimizations(optimizedPrompt, technical_specifications)
|
||||
|
||||
// Step 4: Enhance with code context
|
||||
const codeContext = this.extractCodeContext(optimizedPrompt)
|
||||
|
||||
// Step 5: Generate technical Jason format
|
||||
const jasonFormat = this.generateTechnicalJasonFormat(optimizedPrompt, domain || 'general', codeContext)
|
||||
|
||||
// Step 6: Calculate accuracy score
|
||||
const accuracyScore = this.calculateTechnicalAccuracy(technical_specifications)
|
||||
|
||||
// Step 7: Generate performance tips
|
||||
const performanceTips = this.generateTechnicalTips(technical_specifications, domain || 'general')
|
||||
|
||||
return {
|
||||
original_prompt: technicalPrompt,
|
||||
nano_coder_prompt: optimizedPrompt,
|
||||
jason_format: jasonFormat,
|
||||
technical_specifications: technical_specifications,
|
||||
accuracy_score: accuracyScore,
|
||||
performance_tips: performanceTips,
|
||||
code_context: codeContext
|
||||
}
|
||||
}
|
||||
|
||||
private detectTechnicalDomain(prompt: string): string | null {
|
||||
for (const [domain, patterns] of Object.entries(this.technicalPatterns)) {
|
||||
if (patterns.some(pattern => prompt.includes(pattern))) {
|
||||
return domain
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
private enhanceTechnicalDomain(prompt: string, domain: string, specifications: string[]): string {
|
||||
const enhancement = this.getDomainEnhancement(domain)
|
||||
if (enhancement) {
|
||||
const enhanced = `${prompt}, ${enhancement}`
|
||||
specifications.push(`Domain enhancement: Added "${enhancement}" for ${domain}`)
|
||||
return enhanced
|
||||
}
|
||||
return prompt
|
||||
}
|
||||
|
||||
private getDomainEnhancement(domain: string): string {
|
||||
const enhancements = {
|
||||
programming: 'well-structured and maintainable',
|
||||
architecture: 'scalable and secure architecture',
|
||||
webdev: 'responsive and accessible web application',
|
||||
mobile: 'cross-platform mobile solution',
|
||||
devops: 'automated and reliable deployment',
|
||||
dataai: 'efficient and scalable data processing',
|
||||
quality: 'comprehensive testing strategy',
|
||||
security: 'enterprise-grade security measures',
|
||||
performance: 'high-performance optimization'
|
||||
}
|
||||
|
||||
return enhancements[domain as keyof typeof enhancements] || 'technical excellence'
|
||||
}
|
||||
|
||||
private applyTechnicalPatterns(prompt: string, specifications: string[]): string {
|
||||
let optimized = prompt
|
||||
|
||||
// Apply programming patterns
|
||||
const programmingPatterns = ['clean code', 'DRY principle', 'SOLID principles']
|
||||
const selectedPattern = programmingPatterns[Math.floor(Math.random() * programmingPatterns.length)]
|
||||
if (!optimized.includes(selectedPattern)) {
|
||||
optimized = `${optimized}, ${selectedPattern}`
|
||||
specifications.push(`Programming pattern: Applied "${selectedPattern}"`)
|
||||
}
|
||||
|
||||
return optimized
|
||||
}
|
||||
|
||||
private addTechnicalOptimizations(prompt: string, specifications: string[]): string {
|
||||
const optimizationTypes = ['quality', 'performance', 'architecture', 'security']
|
||||
const selectedType = optimizationTypes[Math.floor(Math.random() * optimizationTypes.length)]
|
||||
const optimizations = this.technicalOptimizations[selectedType as keyof typeof this.technicalOptimizations]
|
||||
const selectedOptimization = optimizations[Math.floor(Math.random() * optimizations.length)]
|
||||
|
||||
if (!prompt.includes(selectedOptimization)) {
|
||||
const enhanced = `${prompt}, ${selectedOptimization}`
|
||||
specifications.push(`${selectedType} optimization: Added "${selectedOptimization}"`)
|
||||
return enhanced
|
||||
}
|
||||
|
||||
return prompt
|
||||
}
|
||||
|
||||
private extractCodeContext(prompt: string): string[] {
|
||||
const context: string[] = []
|
||||
|
||||
// Detect programming languages
|
||||
for (const [language, patterns] of Object.entries(this.codePatterns.languages)) {
|
||||
if (patterns.some(pattern => prompt.includes(pattern)) || prompt.includes(language)) {
|
||||
context.push(`Programming Language: ${language.toUpperCase()}`)
|
||||
}
|
||||
}
|
||||
|
||||
// Detect frameworks
|
||||
for (const [framework, patterns] of Object.entries(this.codePatterns.frameworks)) {
|
||||
if (patterns.some(pattern => prompt.includes(pattern)) || prompt.includes(framework)) {
|
||||
context.push(`Framework: ${framework.charAt(0).toUpperCase() + framework.slice(1)}`)
|
||||
}
|
||||
}
|
||||
|
||||
return context.slice(0, 5) // Limit to 5 context items
|
||||
}
|
||||
|
||||
private generateTechnicalJasonFormat(optimizedPrompt: string, domain: string, codeContext: string[]): string {
|
||||
const jasonStructure = {
|
||||
prompt: optimizedPrompt,
|
||||
version: '3.0', // Technical optimization version
|
||||
type: 'technical_optimization',
|
||||
optimization: {
|
||||
domain: domain || 'general',
|
||||
technical_level: 'advanced',
|
||||
context: codeContext,
|
||||
focus: 'technical_excellence'
|
||||
},
|
||||
metadata: {
|
||||
created_by: 'NanoCoder',
|
||||
optimization_level: 'deep_reverse_engineered_technical',
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
}
|
||||
|
||||
return JSON.stringify(jasonStructure, null, 2)
|
||||
}
|
||||
|
||||
private calculateTechnicalAccuracy(specifications: string[]): number {
|
||||
// Base score starts at 70%
|
||||
let score = 70
|
||||
|
||||
// Add points for technical enhancements
|
||||
score += specifications.length * 5
|
||||
|
||||
// Domain bonuses
|
||||
score += 10 // Technical domain recognition bonus
|
||||
|
||||
// Cap at 98%
|
||||
return Math.min(98, score)
|
||||
}
|
||||
|
||||
private generateTechnicalTips(specifications: string[], domain: string): string[] {
|
||||
const tips: string[] = []
|
||||
|
||||
// Domain-specific tips
|
||||
if (domain === 'programming') {
|
||||
tips.push('Focus on clean, readable code with proper error handling')
|
||||
tips.push('Consider testing strategies from the beginning')
|
||||
} else if (domain === 'architecture') {
|
||||
tips.push('Plan for scalability and future requirements')
|
||||
tips.push('Consider security implications of architectural decisions')
|
||||
} else if (domain === 'webdev') {
|
||||
tips.push('Ensure cross-browser compatibility and responsive design')
|
||||
tips.push('Optimize for performance and user experience')
|
||||
} else if (domain === 'mobile') {
|
||||
tips.push('Consider platform-specific guidelines and user experience')
|
||||
tips.push('Optimize for mobile performance and battery usage')
|
||||
} else if (domain === 'dataai') {
|
||||
tips.push('Ensure data quality and proper validation')
|
||||
tips.push('Consider ethical implications and data privacy')
|
||||
}
|
||||
|
||||
// General technical tips
|
||||
if (specifications.some(spec => spec.includes('quality'))) {
|
||||
tips.push('Code quality improvements reduce maintenance costs')
|
||||
}
|
||||
|
||||
if (specifications.some(spec => spec.includes('performance'))) {
|
||||
tips.push('Performance optimizations should be measured and tested')
|
||||
}
|
||||
|
||||
if (specifications.some(spec => spec.includes('security'))) {
|
||||
tips.push('Security should be implemented throughout the development lifecycle')
|
||||
}
|
||||
|
||||
return tips
|
||||
}
|
||||
|
||||
// Technical quick templates
|
||||
generateTechnicalTemplate(type: 'webapp' | 'mobileapp' | 'microservice' | 'api' | 'dashboard'): string {
|
||||
const templates = {
|
||||
webapp: 'React web application with TypeScript, clean architecture, responsive design, modern UI components, secure authentication',
|
||||
mobileapp: 'React Native mobile application, cross-platform solution, native performance, intuitive UI, offline capabilities',
|
||||
microservice: 'Node.js microservice with REST API, scalable architecture, Docker containerization, Kubernetes deployment',
|
||||
api: 'REST API with Node.js/Express, database integration, authentication middleware, rate limiting, comprehensive documentation',
|
||||
dashboard: 'Data visualization dashboard with React, real-time updates, responsive design, interactive charts, data analytics'
|
||||
}
|
||||
|
||||
return templates[type]
|
||||
}
|
||||
|
||||
// Batch optimization for technical prompts
|
||||
async optimizeTechnicalBatch(prompts: string[]): Promise<NanoCoderResult[]> {
|
||||
const results: NanoCoderResult[] = []
|
||||
|
||||
for (const prompt of prompts) {
|
||||
try {
|
||||
const result = await this.optimizePrompt(prompt)
|
||||
results.push(result)
|
||||
} catch (error) {
|
||||
console.error(`Failed to optimize technical prompt: ${prompt}`, error)
|
||||
}
|
||||
}
|
||||
|
||||
return results
|
||||
}
|
||||
}
|
||||
|
||||
// Create singleton instance
|
||||
export const nanoCoder = new NanoCoder()
|
||||
374
src/services/nano-prompt.ts
Normal file
374
src/services/nano-prompt.ts
Normal file
@@ -0,0 +1,374 @@
|
||||
// NanoPrompt - Deep Reverse Engineered Jason Prompt Optimizer
|
||||
// Translates English requests into optimized Jason prompts for maximum AI accuracy
|
||||
|
||||
export interface NanoPromptResult {
|
||||
original_prompt: string
|
||||
nano_prompt: string
|
||||
jason_format: string
|
||||
optimizations_applied: string[]
|
||||
accuracy_score: number
|
||||
performance_tips: string[]
|
||||
}
|
||||
|
||||
export class NanoPrompt {
|
||||
// AI model optimization patterns
|
||||
private modelOptimizations = {
|
||||
// Quality descriptors for maximum detail
|
||||
quality: [
|
||||
'ultra-detailed', 'high-resolution', 'photorealistic', '8k', '4k',
|
||||
'masterpiece', 'best quality', 'highest detail', 'professional',
|
||||
'award-winning', 'cinematic quality', 'hyperrealistic'
|
||||
],
|
||||
|
||||
// Style-specific keywords
|
||||
styles: {
|
||||
realistic: ['photorealistic', 'lifelike', 'natural lighting', 'real-world', 'detailed texture'],
|
||||
anime: ['anime style', 'manga art', 'japanese animation', 'studio ghibli style', 'cel shading'],
|
||||
fantasy: ['fantasy art', 'magical', 'enchanted', 'mythical', 'ethereal', 'dreamlike'],
|
||||
scifi: ['sci-fi art', 'futuristic', 'cyberpunk aesthetic', 'high-tech', 'advanced technology'],
|
||||
abstract: ['abstract art', 'geometric patterns', 'modern art', 'contemporary', 'artistic']
|
||||
},
|
||||
|
||||
// Composition and framing
|
||||
composition: [
|
||||
'perfect composition', 'rule of thirds', 'golden ratio', 'balanced framing',
|
||||
'dynamic perspective', 'depth of field', 'bokeh effect', 'professional photography'
|
||||
],
|
||||
|
||||
// Lighting keywords
|
||||
lighting: [
|
||||
'dramatic lighting', 'cinematic lighting', 'volumetric lighting', 'soft shadows',
|
||||
'golden hour', 'blue hour', 'rim lighting', 'three-point lighting', 'natural light'
|
||||
],
|
||||
|
||||
// Color enhancement
|
||||
colors: [
|
||||
'vibrant colors', 'color harmony', 'color grading', 'professional color palette',
|
||||
'rich saturation', 'accurate colors', 'color correction', 'cinematic color grading'
|
||||
],
|
||||
|
||||
// Detail and texture
|
||||
details: [
|
||||
'intricate details', 'fine textures', 'surface details', 'micro details',
|
||||
'hyper-detailed', 'pixel-perfect', 'sharp focus', 'crisp details'
|
||||
],
|
||||
|
||||
// Error elimination patterns
|
||||
error_prevention: [
|
||||
'no distortion', 'no artifacts', 'clean image', 'no noise',
|
||||
'no blur', 'proper anatomy', 'correct proportions', 'no glitches'
|
||||
]
|
||||
}
|
||||
|
||||
// Common English patterns and their Jason equivalents
|
||||
private patternMappings = {
|
||||
// Basic descriptions
|
||||
'a picture of': 'high-quality photograph of',
|
||||
'an image of': 'professional photograph of',
|
||||
'drawing of': 'detailed illustration of',
|
||||
'painting of': 'masterpiece painting of',
|
||||
'photo of': 'ultra-realistic photograph of',
|
||||
|
||||
// Quality improvements
|
||||
'nice': 'exceptional',
|
||||
'good': 'outstanding',
|
||||
'beautiful': 'breathtakingly beautiful',
|
||||
'pretty': 'stunningly attractive',
|
||||
'cool': 'impressive',
|
||||
'amazing': 'extraordinary',
|
||||
|
||||
// Style specifications
|
||||
'simple': 'elegant minimalist',
|
||||
'complex': 'intricate detailed',
|
||||
'modern': 'contemporary sophisticated',
|
||||
'old': 'vintage classic',
|
||||
'new': 'cutting-edge',
|
||||
|
||||
// Lighting improvements
|
||||
'bright': 'well-lit with bright illumination',
|
||||
'dark': 'dramatic low-key lighting',
|
||||
'sunny': 'golden hour sunlight',
|
||||
'night': 'cinematic night lighting',
|
||||
|
||||
// Composition
|
||||
'close up': 'detailed close-up shot',
|
||||
'wide': 'expansive wide-angle view',
|
||||
'top': 'bird\'s eye view',
|
||||
'side': 'profile perspective',
|
||||
|
||||
// Error prevention
|
||||
'without': 'excluding',
|
||||
'no': 'absence of',
|
||||
'avoid': 'carefully avoiding',
|
||||
'don\'t': 'ensuring no'
|
||||
}
|
||||
|
||||
async optimizePrompt(englishPrompt: string): Promise<NanoPromptResult> {
|
||||
const optimizations_applied: string[] = []
|
||||
let optimizedPrompt = englishPrompt.toLowerCase()
|
||||
|
||||
// Step 1: Apply pattern mappings
|
||||
optimizedPrompt = this.applyPatternMappings(optimizedPrompt, optimizations_applied)
|
||||
|
||||
// Step 2: Detect and enhance style
|
||||
const detectedStyle = this.detectStyle(optimizedPrompt)
|
||||
if (detectedStyle) {
|
||||
optimizedPrompt = this.enhanceStyle(optimizedPrompt, detectedStyle, optimizations_applied)
|
||||
}
|
||||
|
||||
// Step 3: Add quality descriptors
|
||||
optimizedPrompt = this.addQualityDescriptors(optimizedPrompt, optimizations_applied)
|
||||
|
||||
// Step 4: Optimize composition
|
||||
optimizedPrompt = this.optimizeComposition(optimizedPrompt, optimizations_applied)
|
||||
|
||||
// Step 5: Enhance lighting
|
||||
optimizedPrompt = this.enhanceLighting(optimizedPrompt, optimizations_applied)
|
||||
|
||||
// Step 6: Add color optimization
|
||||
optimizedPrompt = this.optimizeColors(optimizedPrompt, optimizations_applied)
|
||||
|
||||
// Step 7: Add detail enhancement
|
||||
optimizedPrompt = this.enhanceDetails(optimizedPrompt, optimizations_applied)
|
||||
|
||||
// Step 8: Add error prevention
|
||||
optimizedPrompt = this.addErrorPrevention(optimizedPrompt, optimizations_applied)
|
||||
|
||||
// Step 9: Generate Jason format
|
||||
const jasonFormat = this.generateJasonFormat(optimizedPrompt, detectedStyle)
|
||||
|
||||
// Step 10: Calculate accuracy score
|
||||
const accuracyScore = this.calculateAccuracyScore(optimizations_applied)
|
||||
|
||||
// Step 11: Generate performance tips
|
||||
const performanceTips = this.generatePerformanceTips(optimizations_applied, detectedStyle)
|
||||
|
||||
return {
|
||||
original_prompt: englishPrompt,
|
||||
nano_prompt: optimizedPrompt,
|
||||
jason_format: jasonFormat,
|
||||
optimizations_applied: optimizations_applied,
|
||||
accuracy_score: accuracyScore,
|
||||
performance_tips: performanceTips
|
||||
}
|
||||
}
|
||||
|
||||
private applyPatternMappings(prompt: string, optimizations: string[]): string {
|
||||
let optimized = prompt
|
||||
|
||||
for (const [pattern, replacement] of Object.entries(this.patternMappings)) {
|
||||
if (optimized.includes(pattern)) {
|
||||
optimized = optimized.replace(new RegExp(pattern, 'g'), replacement)
|
||||
optimizations.push(`Pattern mapping: "${pattern}" → "${replacement}"`)
|
||||
}
|
||||
}
|
||||
|
||||
return optimized
|
||||
}
|
||||
|
||||
private detectStyle(prompt: string): string {
|
||||
for (const [style, keywords] of Object.entries(this.modelOptimizations.styles)) {
|
||||
if (keywords.some(keyword => prompt.includes(keyword))) {
|
||||
return style
|
||||
}
|
||||
}
|
||||
return 'realistic' // Default style
|
||||
}
|
||||
|
||||
private enhanceStyle(prompt: string, style: string, optimizations: string[]): string {
|
||||
const styleKeywords = this.modelOptimizations.styles[style as keyof typeof this.modelOptimizations.styles]
|
||||
if (styleKeywords) {
|
||||
const keyword = styleKeywords[Math.floor(Math.random() * styleKeywords.length)]
|
||||
if (!prompt.includes(keyword)) {
|
||||
const enhanced = `${prompt}, ${keyword}`
|
||||
optimizations.push(`Style enhancement: Added "${keyword}" for ${style} style`)
|
||||
return enhanced
|
||||
}
|
||||
}
|
||||
return prompt
|
||||
}
|
||||
|
||||
private addQualityDescriptors(prompt: string, optimizations: string[]): string {
|
||||
const qualityKeywords = this.modelOptimizations.quality
|
||||
const selectedQuality = qualityKeywords[Math.floor(Math.random() * Math.min(3, qualityKeywords.length))]
|
||||
|
||||
if (!prompt.includes(selectedQuality) && !prompt.includes('quality')) {
|
||||
const enhanced = `${prompt}, ${selectedQuality}`
|
||||
optimizations.push(`Quality enhancement: Added "${selectedQuality}"`)
|
||||
return enhanced
|
||||
}
|
||||
return prompt
|
||||
}
|
||||
|
||||
private optimizeComposition(prompt: string, optimizations: string[]): string {
|
||||
const compositionKeywords = this.modelOptimizations.composition
|
||||
const selectedComposition = compositionKeywords[Math.floor(Math.random() * compositionKeywords.length)]
|
||||
|
||||
if (!prompt.includes('composition') && !prompt.includes('framing')) {
|
||||
const enhanced = `${prompt}, ${selectedComposition}`
|
||||
optimizations.push(`Composition optimization: Added "${selectedComposition}"`)
|
||||
return enhanced
|
||||
}
|
||||
return prompt
|
||||
}
|
||||
|
||||
private enhanceLighting(prompt: string, optimizations: string[]): string {
|
||||
const lightingKeywords = this.modelOptimizations.lighting
|
||||
const selectedLighting = lightingKeywords[Math.floor(Math.random() * lightingKeywords.length)]
|
||||
|
||||
if (!prompt.includes('lighting') && !prompt.includes('light')) {
|
||||
const enhanced = `${prompt}, ${selectedLighting}`
|
||||
optimizations.push(`Lighting enhancement: Added "${selectedLighting}"`)
|
||||
return enhanced
|
||||
}
|
||||
return prompt
|
||||
}
|
||||
|
||||
private optimizeColors(prompt: string, optimizations: string[]): string {
|
||||
const colorKeywords = this.modelOptimizations.colors
|
||||
const selectedColor = colorKeywords[Math.floor(Math.random() * colorKeywords.length)]
|
||||
|
||||
if (!prompt.includes('color') && !prompt.includes('saturation')) {
|
||||
const enhanced = `${prompt}, ${selectedColor}`
|
||||
optimizations.push(`Color optimization: Added "${selectedColor}"`)
|
||||
return enhanced
|
||||
}
|
||||
return prompt
|
||||
}
|
||||
|
||||
private enhanceDetails(prompt: string, optimizations: string[]): string {
|
||||
const detailKeywords = this.modelOptimizations.details
|
||||
const selectedDetail = detailKeywords[Math.floor(Math.random() * detailKeywords.length)]
|
||||
|
||||
if (!prompt.includes('detail') && !prompt.includes('texture')) {
|
||||
const enhanced = `${prompt}, ${selectedDetail}`
|
||||
optimizations.push(`Detail enhancement: Added "${selectedDetail}"`)
|
||||
return enhanced
|
||||
}
|
||||
return prompt
|
||||
}
|
||||
|
||||
private addErrorPrevention(prompt: string, optimizations: string[]): string {
|
||||
const errorKeywords = this.modelOptimizations.error_prevention
|
||||
const selectedErrorPrevention = errorKeywords[Math.floor(Math.random() * 2)] // Use 2 for less aggressive
|
||||
|
||||
if (!prompt.includes('no') && !prompt.includes('without')) {
|
||||
const enhanced = `${prompt}, ${selectedErrorPrevention}`
|
||||
optimizations.push(`Error prevention: Added "${selectedErrorPrevention}"`)
|
||||
return enhanced
|
||||
}
|
||||
return prompt
|
||||
}
|
||||
|
||||
private generateJasonFormat(optimizedPrompt: string, style: string): string {
|
||||
const jasonStructure = {
|
||||
prompt: optimizedPrompt,
|
||||
version: '2.0', // NanoPrompt enhanced version
|
||||
type: 'optimized_image_generation',
|
||||
optimization: {
|
||||
style: style,
|
||||
quality: 'maximum',
|
||||
accuracy: 'enhanced',
|
||||
error_reduction: 'active'
|
||||
},
|
||||
metadata: {
|
||||
created_by: 'NanoPrompt',
|
||||
optimization_level: 'deep_reverse_engineered',
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
}
|
||||
|
||||
return JSON.stringify(jasonStructure, null, 2)
|
||||
}
|
||||
|
||||
private calculateAccuracyScore(optimizations: string[]): number {
|
||||
// Base score starts at 60%
|
||||
let score = 60
|
||||
|
||||
// Add points for each optimization category
|
||||
const categories = {
|
||||
'Pattern mapping': 5,
|
||||
'Style enhancement': 8,
|
||||
'Quality enhancement': 10,
|
||||
'Composition optimization': 7,
|
||||
'Lighting enhancement': 6,
|
||||
'Color optimization': 5,
|
||||
'Detail enhancement': 8,
|
||||
'Error prevention': 6
|
||||
}
|
||||
|
||||
for (const optimization of optimizations) {
|
||||
for (const [category, points] of Object.entries(categories)) {
|
||||
if (optimization.includes(category)) {
|
||||
score += points
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cap at 95%
|
||||
return Math.min(95, score)
|
||||
}
|
||||
|
||||
private generatePerformanceTips(optimizations: string[], style: string): string[] {
|
||||
const tips: string[] = []
|
||||
|
||||
// Style-specific tips
|
||||
if (style === 'realistic') {
|
||||
tips.push('Use specific camera settings for photorealistic results')
|
||||
tips.push('Include lighting direction information')
|
||||
} else if (style === 'anime') {
|
||||
tips.push('Specify art style (e.g., Studio Ghibli, Makoto Shinkai)')
|
||||
tips.push('Include character design elements')
|
||||
} else if (style === 'fantasy') {
|
||||
tips.push('Add magical element descriptions')
|
||||
tips.push('Specify atmosphere and mood details')
|
||||
}
|
||||
|
||||
// General tips based on optimizations
|
||||
if (optimizations.some(opt => opt.includes('Quality'))) {
|
||||
tips.push('High quality descriptors increase rendering time but improve results')
|
||||
}
|
||||
|
||||
if (optimizations.some(opt => opt.includes('Error prevention'))) {
|
||||
tips.push('Error prevention keywords reduce common AI generation issues')
|
||||
}
|
||||
|
||||
if (optimizations.some(opt => opt.includes('Composition'))) {
|
||||
tips.push('Composition keywords help with framing and balance')
|
||||
}
|
||||
|
||||
return tips
|
||||
}
|
||||
|
||||
// Quick optimization templates
|
||||
generateQuickOptimization(type: 'portrait' | 'landscape' | 'character' | 'object'): string {
|
||||
const templates = {
|
||||
portrait: 'Professional portrait photography, ultra-detailed, perfect composition, dramatic lighting, high resolution, no artifacts',
|
||||
landscape: 'Breathtaking landscape photography, wide-angle view, vibrant colors, golden hour lighting, cinematic quality, hyper-detailed',
|
||||
character: 'Character design, detailed features, expressive pose, proper anatomy, clean lines, professional quality, no distortion',
|
||||
object: 'Product photography, studio lighting, sharp focus, detailed textures, accurate colors, professional composition'
|
||||
}
|
||||
|
||||
return templates[type]
|
||||
}
|
||||
|
||||
// Batch optimization for multiple prompts
|
||||
async optimizeBatch(prompts: string[]): Promise<NanoPromptResult[]> {
|
||||
const results: NanoPromptResult[] = []
|
||||
|
||||
for (const prompt of prompts) {
|
||||
try {
|
||||
const result = await this.optimizePrompt(prompt)
|
||||
results.push(result)
|
||||
} catch (error) {
|
||||
console.error(`Failed to optimize prompt: ${prompt}`, error)
|
||||
}
|
||||
}
|
||||
|
||||
return results
|
||||
}
|
||||
}
|
||||
|
||||
// Create singleton instance
|
||||
export const nanoPrompt = new NanoPrompt()
|
||||
37
src/utils/api-utils.ts
Normal file
37
src/utils/api-utils.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
// API utilities for safe header handling
|
||||
|
||||
/**
|
||||
* Sanitize API key to remove problematic characters
|
||||
* HTTP headers must only contain ASCII printable characters for maximum compatibility
|
||||
*/
|
||||
export function sanitizeApiKey(key?: string): string | null {
|
||||
if (!key) return null
|
||||
|
||||
try {
|
||||
// Remove all non-ASCII printable characters (only allow space, !, #, $, %, &, ', *, +, -, ., /, 0-9, :, =, ?, A-Z, a-z)
|
||||
const sanitized = key.replace(/[^\x20-\x7E]/g, '').trim()
|
||||
|
||||
// Basic API key format validation
|
||||
if (sanitized.length < 10 || sanitized.length > 200) {
|
||||
console.warn('Invalid API key length after sanitization:', sanitized.length)
|
||||
return null
|
||||
}
|
||||
|
||||
console.log('🔧 Sanitized API key:', sanitized)
|
||||
return sanitized
|
||||
} catch (error) {
|
||||
console.error('Failed to sanitize API key:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create safe Authorization header
|
||||
*/
|
||||
export function createAuthHeader(token: string): string {
|
||||
const sanitized = sanitizeApiKey(token)
|
||||
if (!sanitized) {
|
||||
throw new Error('Invalid token: contains unsupported characters')
|
||||
}
|
||||
return `Bearer ${sanitized}`
|
||||
}
|
||||
81
tailwind.config.ts
Normal file
81
tailwind.config.ts
Normal file
@@ -0,0 +1,81 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
const { fontFamily } = require("tailwindcss/defaultTheme")
|
||||
|
||||
const config: Config = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["var(--font-sans)", ...fontFamily.sans],
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
};
|
||||
export default config;
|
||||
44
tsconfig.json
Normal file
44
tsconfig.json
Normal file
@@ -0,0 +1,44 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts",
|
||||
"**/*.mts",
|
||||
"out/types/**/*.ts",
|
||||
"out/dev/types/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user