CinePrompt Studio v3.3 - Verified Physics & Auteur Logic

Major updates: - Implemented pure text-to-image generation (removed image references) - Added Film Stock & Texture Engine for deep realism - Added 9 new Auteur Style presets with verified camera/lens pairings - Enhanced Smart Fill with contextual details based on application - Updated Master System Prompt to Cinematography Edition - Implemented sensory enhancement for texture, atmosphere, and light - Verified camera/lens combinations through stress testing - Updated UI to reflect v3.3 with cleaner interface 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-05 11:23:46 -05:00 · 2025-12-05 11:23:46 -05:00 · 07133397ff
commit 07133397ff
38 changed files with 5325 additions and 0 deletions
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,3 @@
+# Google Gemini API Key
+# Get your API key from: https://makersuite.google.com/app/apikey
+VITE_GEMINI_API_KEY=your_key_here
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Environment variables
+.env
+.env.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/LOGO/FAVICON.png
+++ b/LOGO/FAVICON.png
--- a/LOGO/PROMPT_STUDIO_LOGO.svg
+++ b/LOGO/PROMPT_STUDIO_LOGO.svg
@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.87 50.32">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #f59e0b;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+
+      .cls-3 {
+        fill: #64748b;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <g>
+        <g>
+          <path class="cls-2" d="M8.39,34.77l.38-.85c.41.3,1.02.51,1.61.51.67,0,.94-.22.94-.52,0-.91-2.83-.29-2.83-2.09,0-.83.67-1.52,2.05-1.52.61,0,1.24.15,1.69.43l-.35.86c-.45-.26-.92-.38-1.35-.38-.67,0-.93.25-.93.56,0,.9,2.83.28,2.83,2.07,0,.81-.68,1.51-2.07,1.51-.77,0-1.55-.23-1.98-.56Z"/>
+          <path class="cls-2" d="M19.7,31.29h-1.56v-.92h4.24v.92h-1.56v3.95h-1.13v-3.95Z"/>
+          <path class="cls-2" d="M28.43,33.1v-2.73h1.13v2.69c0,.93.4,1.31,1.09,1.31s1.09-.38,1.09-1.31v-2.69h1.11v2.73c0,1.43-.82,2.23-2.21,2.23s-2.21-.79-2.21-2.23Z"/>
+          <path class="cls-2" d="M39.51,30.38h2.21c1.59,0,2.69.96,2.69,2.44s-1.09,2.44-2.69,2.44h-2.21v-4.87ZM41.67,34.32c.97,0,1.6-.58,1.6-1.51s-.63-1.51-1.6-1.51h-1.03v3.02h1.03Z"/>
+          <path class="cls-2" d="M50.81,30.38h1.13v4.87h-1.13v-4.87Z"/>
+          <path class="cls-2" d="M58.35,32.81c0-1.45,1.13-2.52,2.66-2.52s2.67,1.06,2.67,2.52-1.13,2.52-2.67,2.52-2.66-1.07-2.66-2.52ZM62.54,32.81c0-.93-.65-1.56-1.52-1.56s-1.52.63-1.52,1.56.65,1.56,1.52,1.56,1.52-.63,1.52-1.56Z"/>
+        </g>
+        <g>
+          <path class="cls-2" d="M17.41,18.59c0,2.46-1.78,3.94-4.72,3.94h-2.8v3.43h-1.62v-11.31h4.41c2.94,0,4.72,1.49,4.72,3.94ZM15.8,18.59c0-1.62-1.08-2.54-3.15-2.54h-2.75v5.07h2.75c2.07,0,3.15-.92,3.15-2.54Z"/>
+          <path class="cls-2" d="M27.36,25.96l-2.44-3.47c-.23.02-.47.03-.71.03h-2.8v3.44h-1.62v-11.31h4.41c2.94,0,4.72,1.49,4.72,3.94,0,1.75-.9,3.01-2.49,3.57l2.68,3.8h-1.76ZM27.31,18.59c0-1.62-1.08-2.54-3.15-2.54h-2.75v5.09h2.75c2.07,0,3.15-.94,3.15-2.55Z"/>
+          <path class="cls-2" d="M30.62,20.31c0-3.31,2.55-5.78,6.03-5.78s6,2.46,6,5.78-2.55,5.79-6,5.79-6.03-2.47-6.03-5.79ZM41.03,20.31c0-2.5-1.87-4.35-4.38-4.35s-4.41,1.84-4.41,4.35,1.87,4.35,4.41,4.35,4.38-1.84,4.38-4.35Z"/>
+          <path class="cls-3" d="M55.29,25.96l-.02-8.24-4.09,6.87h-.74l-4.09-6.82v8.19h-1.55v-11.31h1.33l4.72,7.95,4.65-7.95h1.33l.02,11.31h-1.55Z"/>
+          <path class="cls-3" d="M68.72,18.59c0,2.46-1.78,3.94-4.72,3.94h-2.8v3.43h-1.62v-11.31h4.41c2.94,0,4.72,1.49,4.72,3.94ZM67.1,18.59c0-1.62-1.08-2.54-3.15-2.54h-2.75v5.07h2.75c2.07,0,3.15-.92,3.15-2.54Z"/>
+          <path class="cls-3" d="M73.93,16.06h-3.88v-1.41h9.36v1.41h-3.88v9.91h-1.6v-9.91Z"/>
+        </g>
+      </g>
+      <rect class="cls-1" x=".5" y=".5" width="117.87" height="49.32"/>
+    </g>
+  </g>
+</svg>
--- a/README.md
+++ b/README.md
@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
--- a/TESTS/ASSETS/01_Generated
+++ b/TESTS/ASSETS/01_Generated
--- a/TESTS/ASSETS/01_PS_Generated
+++ b/TESTS/ASSETS/01_PS_Generated
--- a/TESTS/ASSETS/02_Generated
+++ b/TESTS/ASSETS/02_Generated
--- a/TESTS/ASSETS/02_PS_FAIL_Generated
+++ b/TESTS/ASSETS/02_PS_FAIL_Generated
--- a/TESTS/ASSETS/02_PS_Generated
+++ b/TESTS/ASSETS/02_PS_Generated
--- a/TESTS/ASSETS/03_Generated
+++ b/TESTS/ASSETS/03_Generated
--- a/TESTS/ASSETS/03_PS_Generated
+++ b/TESTS/ASSETS/03_PS_Generated
--- a/TESTS/ASSETS/04_Generated
+++ b/TESTS/ASSETS/04_Generated
--- a/TESTS/ASSETS/04_PS_Generated
+++ b/TESTS/ASSETS/04_PS_Generated
--- a/TESTS/ASSETS/05_Generated
+++ b/TESTS/ASSETS/05_Generated
--- a/TESTS/ASSETS/05_PS_Generated
+++ b/TESTS/ASSETS/05_PS_Generated
--- a/TESTS/ASSETS/06_Generated
+++ b/TESTS/ASSETS/06_Generated
--- a/TESTS/ASSETS/06_PS_Generated
+++ b/TESTS/ASSETS/06_PS_Generated
--- a/TESTS/ASSETS/07_Generated
+++ b/TESTS/ASSETS/07_Generated
--- a/TESTS/ASSETS/07_PS_Generated
+++ b/TESTS/ASSETS/07_PS_Generated
--- a/TESTS/ASSETS/07_PS_Generated
+++ b/TESTS/ASSETS/07_PS_Generated
--- a/TESTS/PROMPT_STUDIO.pptx
+++ b/TESTS/PROMPT_STUDIO.pptx
--- a/TESTS/~$PROMPT_STUDIO.pptx
+++ b/TESTS/~$PROMPT_STUDIO.pptx
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Prompt Studio - AI Powered Cinematography Prompts</title>
+  </head>
+  <body class="bg-slate-950">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,32 @@
+{
+  "name": "cineprompt-studio",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@google/generative-ai": "^0.24.1",
+    "lucide-react": "^0.555.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.18",
+    "vite": "^7.2.4"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/logo.svg
+++ b/public/logo.svg
@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.87 50.32">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #f59e0b;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+
+      .cls-3 {
+        fill: #64748b;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <g>
+        <g>
+          <path class="cls-2" d="M8.39,34.77l.38-.85c.41.3,1.02.51,1.61.51.67,0,.94-.22.94-.52,0-.91-2.83-.29-2.83-2.09,0-.83.67-1.52,2.05-1.52.61,0,1.24.15,1.69.43l-.35.86c-.45-.26-.92-.38-1.35-.38-.67,0-.93.25-.93.56,0,.9,2.83.28,2.83,2.07,0,.81-.68,1.51-2.07,1.51-.77,0-1.55-.23-1.98-.56Z"/>
+          <path class="cls-2" d="M19.7,31.29h-1.56v-.92h4.24v.92h-1.56v3.95h-1.13v-3.95Z"/>
+          <path class="cls-2" d="M28.43,33.1v-2.73h1.13v2.69c0,.93.4,1.31,1.09,1.31s1.09-.38,1.09-1.31v-2.69h1.11v2.73c0,1.43-.82,2.23-2.21,2.23s-2.21-.79-2.21-2.23Z"/>
+          <path class="cls-2" d="M39.51,30.38h2.21c1.59,0,2.69.96,2.69,2.44s-1.09,2.44-2.69,2.44h-2.21v-4.87ZM41.67,34.32c.97,0,1.6-.58,1.6-1.51s-.63-1.51-1.6-1.51h-1.03v3.02h1.03Z"/>
+          <path class="cls-2" d="M50.81,30.38h1.13v4.87h-1.13v-4.87Z"/>
+          <path class="cls-2" d="M58.35,32.81c0-1.45,1.13-2.52,2.66-2.52s2.67,1.06,2.67,2.52-1.13,2.52-2.67,2.52-2.66-1.07-2.66-2.52ZM62.54,32.81c0-.93-.65-1.56-1.52-1.56s-1.52.63-1.52,1.56.65,1.56,1.52,1.56,1.52-.63,1.52-1.56Z"/>
+        </g>
+        <g>
+          <path class="cls-2" d="M17.41,18.59c0,2.46-1.78,3.94-4.72,3.94h-2.8v3.43h-1.62v-11.31h4.41c2.94,0,4.72,1.49,4.72,3.94ZM15.8,18.59c0-1.62-1.08-2.54-3.15-2.54h-2.75v5.07h2.75c2.07,0,3.15-.92,3.15-2.54Z"/>
+          <path class="cls-2" d="M27.36,25.96l-2.44-3.47c-.23.02-.47.03-.71.03h-2.8v3.44h-1.62v-11.31h4.41c2.94,0,4.72,1.49,4.72,3.94,0,1.75-.9,3.01-2.49,3.57l2.68,3.8h-1.76ZM27.31,18.59c0-1.62-1.08-2.54-3.15-2.54h-2.75v5.09h2.75c2.07,0,3.15-.94,3.15-2.55Z"/>
+          <path class="cls-2" d="M30.62,20.31c0-3.31,2.55-5.78,6.03-5.78s6,2.46,6,5.78-2.55,5.79-6,5.79-6.03-2.47-6.03-5.79ZM41.03,20.31c0-2.5-1.87-4.35-4.38-4.35s-4.41,1.84-4.41,4.35,1.87,4.35,4.41,4.35,4.38-1.84,4.38-4.35Z"/>
+          <path class="cls-3" d="M55.29,25.96l-.02-8.24-4.09,6.87h-.74l-4.09-6.82v8.19h-1.55v-11.31h1.33l4.72,7.95,4.65-7.95h1.33l.02,11.31h-1.55Z"/>
+          <path class="cls-3" d="M68.72,18.59c0,2.46-1.78,3.94-4.72,3.94h-2.8v3.43h-1.62v-11.31h4.41c2.94,0,4.72,1.49,4.72,3.94ZM67.1,18.59c0-1.62-1.08-2.54-3.15-2.54h-2.75v5.07h2.75c2.07,0,3.15-.92,3.15-2.54Z"/>
+          <path class="cls-3" d="M73.93,16.06h-3.88v-1.41h9.36v1.41h-3.88v9.91h-1.6v-9.91Z"/>
+        </g>
+      </g>
+      <rect class="cls-1" x=".5" y=".5" width="117.87" height="49.32"/>
+    </g>
+  </g>
+</svg>
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.jsx
+++ b/src/App.jsx
@ -0,0 +1,7 @@
+import CinePromptStudio from './components/CinePromptStudio';
+
+function App() {
+  return <CinePromptStudio />;
+}
+
+export default App;
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/CinePromptStudio.jsx
+++ b/src/components/CinePromptStudio.jsx
@ -0,0 +1,978 @@
+import React, { useState, useEffect } from 'react';
+import { Sparkles, Copy, Film, Camera, Sun, Check, Loader2, HelpCircle, Info, Sliders, X } from 'lucide-react';
+import { GoogleGenerativeAI } from '@google/generative-ai';
+
+const CinePromptStudio = () => {
+  // Equipment Data with Detailed Tooltips
+  const cameraData = [
+    {
+      value: 'Arri Alexa 35',
+      display: 'Arri Alexa 35',
+      sensorFormat: 'Super 35',
+      tooltip: 'The Hollywood Standard. Best for natural skin tones and a classic cinematic \'blockbuster\' feel.',
+      tags: 'Narrative / Drama',
+      compatibleLenses: ['Panavision C-Series', 'Cooke S7/i', 'Canon K-35', 'Laowa Probe']
+    },
+    {
+      value: 'Sony Venice 2',
+      display: 'Sony Venice 2',
+      sensorFormat: 'Full Frame',
+      tooltip: 'The Low-Light King. Excellent for night scenes, clean shadows, and a modern aesthetic.',
+      tags: 'Commercial / Night',
+      compatibleLenses: ['Panavision C-Series', 'Cooke S7/i', 'Canon K-35', 'Arri Signature', 'Laowa Probe']
+    },
+    {
+      value: 'Red V-Raptor',
+      display: 'Red V-Raptor',
+      sensorFormat: 'Full Frame',
+      tooltip: 'Hyper-Real Action. Perfect for high-speed motion, sports, and razor-sharp detail.',
+      tags: 'Action / Sports',
+      compatibleLenses: ['Panavision C-Series', 'Cooke S7/i', 'Canon K-35', 'Arri Signature', 'Laowa Probe']
+    },
+    {
+      value: 'Arriflex 416',
+      display: 'Arriflex 416',
+      sensorFormat: 'Super 16 (Film)',
+      tooltip: 'Gritty & Nostalgic. High grain, soft focus, and vibrant, messy colors. The \'Indie\' look.',
+      tags: 'Vintage / Music Video',
+      compatibleLenses: ['Zeiss Super Speed', 'Laowa Probe']
+    },
+    {
+      value: 'Arricam LT',
+      display: 'Arricam LT',
+      sensorFormat: '35mm (Film)',
+      tooltip: 'The Golden Age. Fine grain, organic texture, and rich colors. The classic movie look before digital.',
+      tags: 'Period Piece / Premium',
+      compatibleLenses: ['Panavision C-Series', 'Cooke S7/i', 'Canon K-35', 'Laowa Probe']
+    },
+    {
+      value: 'Fujifilm GFX 100',
+      display: 'Fujifilm GFX 100',
+      sensorFormat: 'Medium Format',
+      tooltip: 'The Studio Master. Massive resolution and depth. Unbeatable for print-quality stills.',
+      tags: 'Product / Fashion',
+      compatibleLenses: ['Fujinon GF', 'Arri Signature', 'Laowa Probe']
+    }
+  ];
+
+  const lensData = [
+    {
+      value: 'Panavision C-Series',
+      display: 'Panavision C-Series',
+      compatibleFormats: ['Super 35', '35mm'],
+      tooltip: 'Classic Widescreen. Horizontal blue flares, oval bokeh. The sci-fi blockbuster look.',
+      keywords: 'Flares, Oval Bokeh'
+    },
+    {
+      value: 'Cooke S7/i',
+      display: 'Cooke S7/i',
+      compatibleFormats: ['Full Frame', 'Super 35', '35mm'],
+      tooltip: 'The \'Cooke Look.\' Warm, gentle, and incredibly flattering. Gold standard for portraits.',
+      keywords: 'Warmth, Face Focus'
+    },
+    {
+      value: 'Canon K-35',
+      display: 'Canon K-35',
+      compatibleFormats: ['Full Frame', 'Super 35', '35mm'],
+      tooltip: 'Dreamy & Retro. Low contrast, glowing highlights. 1970s/80s vibe.',
+      keywords: 'Glow, Retro'
+    },
+    {
+      value: 'Arri Signature',
+      display: 'Arri Signature',
+      compatibleFormats: ['Large Format', 'Full Frame'],
+      tooltip: 'Modern Perfection. Ultra-clean, no distortion, pure reality. The invisible lens.',
+      keywords: 'Clean, Realistic'
+    },
+    {
+      value: 'Zeiss Super Speed',
+      display: 'Zeiss Super Speed',
+      compatibleFormats: ['Super 16 ONLY'],
+      tooltip: 'The 16mm Classic. Sharp but textured. Designed specifically for the smaller 16mm film frame.',
+      keywords: 'Triangular Bokeh, Grit'
+    },
+    {
+      value: 'Fujinon GF',
+      display: 'Fujinon GF',
+      compatibleFormats: ['Medium Format ONLY'],
+      tooltip: 'Studio Glass. Clinically sharp, specifically designed for the massive GFX sensor.',
+      keywords: 'Clinical Sharpness'
+    },
+    {
+      value: 'Laowa Probe',
+      display: 'Laowa Probe',
+      compatibleFormats: ['All Formats'],
+      tooltip: 'Insect-Eye View. Extreme close-ups of small objects/textures.',
+      keywords: 'Macro'
+    }
+  ];
+
+  const applicationData = [
+    {
+      value: 'Portrait Studio',
+      lighting: 'Rembrandt lighting, softbox diffusion, 3-point setup',
+      defaultCamera: 'Arri Alexa 35',
+      defaultLens: 'Cooke S7/i',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Product (Crisp)',
+      lighting: 'Infinity curve, bright diffuse lighting, shadowless, high key',
+      defaultCamera: 'Fujifilm GFX 100',
+      defaultLens: 'Fujinon GF',
+      focusType: 'realism'
+    },
+    {
+      value: 'Food Photography',
+      lighting: 'Natural window light simulation, back-lighting for steam/texture, warm reflector fill, medium depth of field, focus on texture',
+      defaultCamera: 'Sony Venice 2',
+      defaultLens: 'Cooke S7/i',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Golden Hour (Outdoor)',
+      lighting: 'Sun low on horizon, warm orange glow, long shadows, lens flare, magic hour atmosphere, cinematic depth',
+      defaultCamera: 'Arricam LT',
+      defaultLens: 'Panavision C-Series',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Blue Hour (City)',
+      lighting: 'Twilight, deep blue ambient sky light contrasting with warm practical street lamps, moody, atmospheric, balanced exposure',
+      defaultCamera: 'Sony Venice 2',
+      defaultLens: 'Arri Signature',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Neon Cyberpunk',
+      lighting: 'Harsh neon signage, mixed color temp, wet reflections',
+      defaultCamera: 'Red V-Raptor',
+      defaultLens: 'Panavision C-Series',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Nostalgic Memory',
+      lighting: 'Hazy atmosphere, overexposed highlights, light leaks, warm color grade, sentimental mood, soft focus throughout',
+      defaultCamera: 'Arriflex 416',
+      defaultLens: 'Zeiss Super Speed',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Corporate Headshot',
+      lighting: 'Clean white background, high-key lighting, professional balanced fill, sharp focus on eyes, moderate depth of field',
+      defaultCamera: 'Fuji GFX 100',
+      defaultLens: 'Cooke S7/i',
+      focusType: 'realism'
+    },
+    {
+      value: 'Macro: Luxury Jewelry',
+      lighting: 'Sparkling point-source lighting, black velvet background, high contrast reflection control, focus stacking simulation for complete sharpness',
+      defaultCamera: 'Fuji GFX 100',
+      defaultLens: 'Macro / Probe Lens',
+      focusType: 'realism'
+    },
+    {
+      value: 'Macro: Nature Details',
+      lighting: 'Diffused natural sunlight, shallow depth of field, vibrant greens, morning dew, microscopic texture',
+      defaultCamera: 'Arri Alexa 35',
+      defaultLens: 'Macro / Probe Lens',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Wildlife / Safari',
+      lighting: 'Telephoto compression, frozen motion, golden hour backlight, natural habitat, separation from background',
+      defaultCamera: 'Red V-Raptor',
+      defaultLens: 'Cooke S7/i',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Sports Action',
+      lighting: 'High shutter speed, frozen particles/sweat, stadium floodlights, dynamic composition, sharp subject focus',
+      defaultCamera: 'Red V-Raptor',
+      defaultLens: 'Panavision C-Series',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Street Photography',
+      lighting: 'Candid moment, natural available light, messy urban background, hyperfocal distance, deep depth of field, everything in focus',
+      defaultCamera: 'Arriflex 416',
+      defaultLens: 'Canon K-35',
+      focusType: 'realism'
+    },
+    {
+      value: 'Architecture',
+      lighting: 'Balanced mixed lighting, straight lines, airy atmosphere',
+      defaultCamera: 'Fujifilm GFX 100',
+      defaultLens: 'Fujinon GF',
+      focusType: 'realism'
+    },
+    {
+      value: 'Fashion Editorial',
+      lighting: 'Avant-garde lighting, colored gels, stark shadows, high fashion pose, studio backdrop, stylized depth',
+      defaultCamera: 'Sony Venice 2',
+      defaultLens: 'Canon K-35',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Cinematic Horror',
+      lighting: 'Underexposed, single harsh source (flashlight), heavy shadows',
+      defaultCamera: 'Arricam LT',
+      defaultLens: 'Canon K-35',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Docu / Realism',
+      lighting: 'Natural window key light, negative fill, messy authentic background',
+      defaultCamera: 'Arri Alexa 35',
+      defaultLens: 'Arri Signature',
+      focusType: 'realism'
+    },
+    {
+      value: 'Symmetrical Whimsy',
+      lighting: 'Shadowless high-key lighting, flat diorama aesthetic, vibrant pastel color palette, 90-degree planimetric composition',
+      defaultCamera: 'Arricam LT',
+      defaultLens: 'Cooke S7/i',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'IMAX Scale Epic',
+      lighting: 'Naturalistic practical lighting, cool color temperature, high contrast, immense sense of scale, deep depth of field',
+      defaultCamera: 'Arri Alexa 35',
+      defaultLens: 'Arri Signature',
+      focusType: 'realism'
+    },
+    {
+      value: 'Clinical Thriller',
+      lighting: 'Low-key chiaroscuro, controlled shadows, sickly green/yellow color grade, precise stabilized motion',
+      defaultCamera: 'Red V-Raptor',
+      defaultLens: 'Arri Signature',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Brutalist Atmosphere',
+      lighting: 'Single source silhouette, atmospheric haze, monochromatic orange/sepia tones, stark geometry, visual silence',
+      defaultCamera: 'Arri Alexa 35',
+      defaultLens: 'Panavision C-Series',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Technicolor Dream',
+      lighting: 'Artificial studio lighting, high saturation, vibrant pinks and cyans, glossy plastic textures, high-key brightness',
+      defaultCamera: 'Arri Alexa 35',
+      defaultLens: 'Cooke S7/i',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Obsessive Symmetry',
+      lighting: 'One-point perspective, deep focus, wide angle distortion, cold practical lighting, clinical perfection',
+      defaultCamera: 'Arricam LT',
+      defaultLens: 'Arri Signature',
+      focusType: 'realism'
+    },
+    {
+      value: 'Hong Kong Nostalgia',
+      lighting: 'Step-printing effect, motion blur, neon-soaked humidity, intimate handheld, rain-slicked textures',
+      defaultCamera: 'Arriflex 416',
+      defaultLens: 'Zeiss Super Speed',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Industrial Haze',
+      lighting: 'Volumetric lighting, visible shafts of light (god rays), atmospheric smoke, high-density industrial detail',
+      defaultCamera: 'Arri Alexa 35',
+      defaultLens: 'Panavision C-Series',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Gothic Fantasy',
+      lighting: 'German Expressionist lighting, high contrast long shadows, twisted geometry, desaturated palette',
+      defaultCamera: 'Arri Alexa 35',
+      defaultLens: 'Panavision C-Series',
+      focusType: 'stylistic'
+    },
+    {
+      value: 'Custom',
+      lighting: 'User-defined lighting setup',
+      defaultCamera: null,
+      defaultLens: null,
+      focusType: 'stylistic'
+    }
+  ];
+
+  const aspectRatios = ['16:9', '2.39:1', '4:3', '1:1', '9:16'];
+
+  // State Management
+  const [application, setApplication] = useState('Golden Hour (Outdoor)');
+  const [camera, setCamera] = useState('');
+  const [lens, setLens] = useState('');
+  const [aspectRatio, setAspectRatio] = useState('16:9');
+  const [sceneDescription, setSceneDescription] = useState('');
+  const [generatedPrompt, setGeneratedPrompt] = useState('');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState('');
+  const [showTooltip, setShowTooltip] = useState(null);
+  const [compatibleLenses, setCompatibleLenses] = useState(lensData);
+
+  // Advanced AI Features State
+  const [creativeFreedom, setCreativeFreedom] = useState(0.3);
+
+  // Effect: Auto-select camera and lens based on application
+  useEffect(() => {
+    const selectedApp = applicationData.find(app => app.value === application);
+    if (selectedApp && selectedApp.defaultCamera) {
+      setCamera(selectedApp.defaultCamera);
+      setLens(selectedApp.defaultLens);
+    }
+  }, [application]);
+
+  // Initialize with defaults
+  useEffect(() => {
+    const initialApp = applicationData.find(app => app.value === application);
+    if (initialApp) {
+      setCamera(initialApp.defaultCamera || cameraData[0].value);
+      setLens(initialApp.defaultLens || lensData[0].value);
+    }
+  }, []);
+
+  // Effect: Filter compatible lenses based on selected camera
+  useEffect(() => {
+    const selectedCamera = cameraData.find(cam => cam.value === camera);
+    if (selectedCamera && selectedCamera.compatibleLenses) {
+      // Filter lenses to only show compatible ones
+      const filtered = lensData.filter(lensOption =>
+        selectedCamera.compatibleLenses.includes(lensOption.value)
+      );
+      setCompatibleLenses(filtered);
+
+      // If current lens is not compatible, select the first compatible lens
+      if (!selectedCamera.compatibleLenses.includes(lens) && filtered.length > 0) {
+        setLens(filtered[0].value);
+      }
+    } else {
+      // If no camera selected or no compatibility info, show all lenses
+      setCompatibleLenses(lensData);
+    }
+  }, [camera]);
+
+
+  // Helper Functions for Advanced AI Features
+
+  // Get aspect ratio prose for composition
+  const getAspectRatioProse = (ratio) => {
+    const proseMap = {
+      '16:9': 'A wide cinematic shot of',
+      '2.39:1': 'A wide cinematic shot of',
+      '4:3': 'A balanced, medium-format composition of',
+      '1:1': 'A balanced, medium-format composition of',
+      '9:16': 'A vertical, full-body portrait of'
+    };
+    return proseMap[ratio] || '';
+  };
+
+  // Get negative constraints based on application
+  const getNegativeConstraints = (app) => {
+    const constraintMap = {
+      'Architecture': 'Strictly AVOID: messy, dirt, grime, imperfections, motion blur, handheld, shaky',
+      'Product (Crisp)': 'Strictly AVOID: messy, dirt, grime, imperfections, motion blur, handheld, shaky',
+      'Corporate Headshot': 'Strictly AVOID: shadow over eyes, silhouette, dark, moody, gritty, high contrast',
+      'Portrait Studio': 'Strictly AVOID: shadow over eyes, silhouette, dark, moody, gritty, high contrast',
+      'Cinematic Horror': 'Strictly AVOID: bright, cheerful, clean, pristine, high-key, sunshine',
+      'Nostalgic Memory': 'Strictly AVOID: bright, cheerful, clean, pristine, high-key, sunshine'
+    };
+    return constraintMap[app] || '';
+  };
+
+  // Get smart fill context based on application
+  const getSmartFillContext = (app) => {
+    const contextMap = {
+      'Neon Cyberpunk': 'Hovering vehicle, rain, neon lights',
+      'Golden Hour (Outdoor)': 'Vintage convertible, dust kicking up, lens flare',
+      'Cinematic Horror': 'Distressed clothing, expressions of terror, flashlight beams cutting through fog, unseen threat in shadows',
+      'Corporate Headshot': 'Business professional attire, confident posture, subtle smile, perfectly groomed',
+      'Portrait Studio': 'Professional studio setup, controlled lighting, posed subject',
+      'Fashion Editorial': 'High fashion couture, avant-garde styling, dramatic poses, editorial expression',
+      'Street Photography': 'Authentic street fashion, candid moments, urban environment, real people',
+      'Blue Hour (City)': 'Urban nightlife fashion, city lights reflecting, atmospheric fog, metropolitan energy',
+      'Wildlife / Safari': 'Natural habitat, majestic animals, golden savanna light, environmental storytelling',
+      'Symmetrical Whimsy': 'Perfectly centered vintage car, pastel luggage on roof, quirkily dressed driver',
+      'IMAX Scale Epic': 'Lone rover traversing massive alien glacier, tiny against the landscape',
+      'Clinical Thriller': 'Sterile hospital corridor, flickering fluorescent light, solitary figure',
+      'Brutalist Atmosphere': 'Concrete monolith, lone figure dwarfed by structure, dust particles',
+      'Technicolor Dream': 'Plastic fantastic furniture, bubble machines, candy-colored wardrobe',
+      'Obsessive Symmetry': 'Identical twins in matching outfits, geometric patterns, perfect alignment',
+      'Hong Kong Nostalgia': 'Taxi in heavy rain, neon lights reflecting on wet glass, lonely passenger',
+      'Industrial Haze': 'Factory interior, steam pipes, worker silhouette against machinery',
+      'Gothic Fantasy': 'Twisted architecture, dramatic cape, fog machine atmosphere'
+    };
+    return contextMap[app] || '';
+  };
+
+  // Get camera texture keywords for deep realism (Film Stock & Texture Engine)
+  const getCameraTextureKeywords = (cameraName) => {
+    const textureMap = {
+      'Arri Alexa 35': 'ArriRaw sensor data, pleasing noise floor, high dynamic range, natural skin micro-texture',
+      'Sony Venice 2': 'Clean digital sensor, zero noise, high-frequency detail, modern sharpness',
+      'Red V-Raptor': '8K RedCode RAW, clinical detail, hyper-sharp edges, high shutter angle crispness',
+      'Arriflex 416': 'Kodak Vision3 500T film stock, heavy film grain, halation, soft organic edges, chemical color process',
+      'Arricam LT': 'Kodak Vision3 50D film stock, fine grain, organic resolution, rich photochemical colors',
+      'Fujifilm GFX 100': '100 Megapixel medium format sensor, pore-level skin detail, textile fiber detail, print quality resolution'
+    };
+    return textureMap[cameraName] || '';
+  };
+
+  // Generate Simple Concatenated Prompt (Fallback)
+  const generateSimplePrompt = () => {
+    if (!sceneDescription.trim()) {
+      setError('Please enter a scene description');
+      return;
+    }
+
+    const selectedApp = applicationData.find(app => app.value === application);
+    const lighting = selectedApp ? selectedApp.lighting : '';
+    const textureKeywords = getCameraTextureKeywords(camera);
+    const aspectRatioProse = getAspectRatioProse(aspectRatio);
+
+    const prompt = `${aspectRatioProse} ${sceneDescription}, ${lighting}, ${textureKeywords}, shot on ${camera}, ${lens}, cinematic composition, aspect ratio ${aspectRatio}`;
+    setGeneratedPrompt(prompt);
+    setError('');
+  };
+
+  // Generate AI-Optimized Prompt using Gemini
+  const generateOptimizedPrompt = async () => {
+    if (!sceneDescription.trim()) {
+      setError('Please enter a scene description');
+      return;
+    }
+
+    const apiKey = import.meta.env.VITE_GEMINI_API_KEY;
+    console.log('API Key status:', apiKey ? 'Present' : 'Missing');
+
+    if (!apiKey || apiKey === 'your_key_here') {
+      console.log('No valid API key found, using fallback');
+      generateSimplePrompt();
+      return;
+    }
+
+    setIsGenerating(true);
+    setError('');
+
+    try {
+      console.log('Initializing Gemini AI...');
+      const genAI = new GoogleGenerativeAI(apiKey);
+
+      // Try different model names
+      const modelNames = [
+        'gemini-3-pro-preview',
+        'gemini-2.0-flash-exp',
+        'gemini-1.5-pro-latest',
+        'gemini-1.5-flash-latest',
+        'gemini-1.5-flash',
+        'gemini-1.5-pro',
+        'gemini-1.0-pro',
+        'gemini-pro'
+      ];
+
+      let model = null;
+      let modelError = null;
+
+      for (const modelName of modelNames) {
+        try {
+          console.log(`Trying model: ${modelName}`);
+          model = genAI.getGenerativeModel({ model: modelName });
+          console.log(`Successfully initialized model: ${modelName}`);
+          break;
+        } catch (err) {
+          console.log(`Model ${modelName} not available, trying next...`);
+          modelError = err;
+        }
+      }
+
+      if (!model) {
+        throw modelError || new Error('No Gemini models available');
+      }
+
+      // Get selected equipment details
+      const selectedApp = applicationData.find(app => app.value === application);
+      const selectedCamera = cameraData.find(cam => cam.value === camera);
+      const selectedLens = lensData.find(l => l.value === lens);
+
+      // Get advanced feature values
+      const aspectRatioProse = getAspectRatioProse(aspectRatio);
+      const negativeConstraints = getNegativeConstraints(application);
+      const smartFillContext = getSmartFillContext(application);
+      const textureKeywords = getCameraTextureKeywords(camera);
+      const wordCount = sceneDescription.split(' ').length;
+
+      // Master System Prompt (Cinematography Edition v3.0)
+      const enhancementPrompt = `You are an expert Cinematographer for "Nano Banana."
+Your goal is to Create a "Thick Description" prompt that emphasizes TEXTURE, ATMOSPHERE, and LIGHT.
+
+INPUT VARIABLES:
+- Scene: ${sceneDescription}
+- Application: ${application}
+- Camera: ${camera}
+- Lens: ${lens}
+- Aspect Ratio Prose: ${aspectRatioProse}
+- Creative Freedom: ${creativeFreedom}
+- Texture Keywords: ${textureKeywords}
+
+EXECUTION STEPS:
+
+1. **SMART FILL CHECK:**
+   - IF input is short (${wordCount} words < 10) AND Creative Freedom is High (${creativeFreedom} > 0.5):
+     INVENT details based on Application: ${smartFillContext ? `"${smartFillContext}"` : 'Use application context'}.
+
+2. **REALISM vs. STYLE CHECK:**
+   ${selectedApp?.focusType === 'realism' ?
+   `- **IF** Application is Architecture, Product, Docu: FORCE Deep Focus. Suppress "bokeh". Describe "clinical sharpness."` :
+   `- **IF** Application is Narrative/Portrait: ENHANCE "bokeh", "flares".`}
+
+3. **SENSORY ENHANCEMENT (THE "DEEP TEXTURE" PASS):**
+   - **Skin:** If humans are present, describe skin texture (e.g., "visible pores," "slight sweat sheen," "natural imperfections") based on the texture keywords.
+   - **Air:** Describe the air quality (e.g., "humid haze," "crisp winter air," "dust motes in light beams").
+   - **Light:** Describe the *quality* of light (e.g., "diffused window light," "specular highlights").
+   ${textureKeywords ? `- Apply these texture characteristics: "${textureKeywords}"` : ''}
+
+4. **OPTICAL CHARACTERISTICS:**
+   ${lens === 'Panavision C-Series' ? '- Lens traits: "horizontal blue flares", "oval bokeh", "anamorphic characteristics"' : ''}
+   ${lens === 'Zeiss Super Speed' ? '- Lens traits: "triangular bokeh", "gritty texture", "vintage character"' : ''}
+   ${lens === 'Fujinon GF' ? '- Lens traits: "clinical sharpness", "no distortion", "perfect corners"' : ''}
+   ${lens === 'Arri Signature' ? '- Lens traits: "invisible glass", "pure reality", "no artifacts"' : ''}
+   ${lens === 'Canon K-35' ? '- Lens traits: "glowing highlights", "low contrast", "vintage softness"' : ''}
+   ${lens === 'Cooke S7/i' ? '- Lens traits: "warm Cooke look", "flattering on faces", "gentle falloff"' : ''}
+   ${lens === 'Laowa Probe' ? '- Lens traits: "extreme macro detail", "insect-eye view", "surreal perspective"' : ''}
+
+5. **ASSEMBLY:**
+   - Start with ${aspectRatioProse}
+   - Expand subject with Smart Fill
+   - Apply ${application} lighting defaults
+   - Inject Texture Keywords (Film Stock/Sensor Data)
+   - Finish with Optical Characteristics (Lens traits)
+
+OUTPUT FORMAT:
+[Aspect Ratio Prose] + [Visual Subject] + [Sensory Atmosphere & Light] + [Texture/Film Stock Info] + [Optical Characteristics].`;
+
+      console.log('Sending request to Gemini...');
+      const result = await model.generateContent(enhancementPrompt);
+      const response = await result.response;
+      const text = response.text();
+
+      console.log('Gemini response received');
+      setGeneratedPrompt(text.trim());
+    } catch (err) {
+      console.error('Gemini API Error:', err);
+
+      if (err.message && (err.message.includes('not found') || err.message.includes('404'))) {
+        setError('Gemini models not available. Please check your API key.');
+        console.log('Available models might vary by API key. Check https://ai.google.dev/models/gemini');
+      } else if (err.message && err.message.includes('API key')) {
+        setError('Invalid API key. Please check your .env file and restart the server.');
+      } else {
+        setError(`AI generation failed: ${err.message || 'Unknown error'}. Using fallback.`);
+      }
+      generateSimplePrompt();
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  // Copy to Clipboard
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(generatedPrompt);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  // Tooltip Component
+  const Tooltip = ({ text, position = 'top' }) => {
+    if (!text) return null;
+
+    return (
+      <div
+        className={`absolute z-50 p-3 bg-slate-900 border border-slate-700 text-slate-300 rounded-lg shadow-2xl max-w-xs pointer-events-none
+        ${position === 'top' ? 'bottom-full mb-2' : 'top-full mt-2'} left-0 right-0`}
+        style={{ textTransform: 'none' }}
+      >
+        <div className="relative text-xs leading-relaxed font-normal tracking-normal">
+          <span style={{ textTransform: 'none', fontWeight: 'normal' }}>{text}</span>
+          <div className={`absolute w-2 h-2 bg-slate-900 border-l border-t border-slate-700 transform rotate-45
+            ${position === 'top' ? 'bottom-[-5px]' : 'top-[-5px] rotate-[225deg]'} left-6`}></div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100">
+      {/* Header - Enhanced with larger logo */}
+      <div className="max-w-7xl mx-auto px-6 pt-10 pb-8">
+        <div className="flex items-center justify-between">
+          <img
+            src="/logo.svg"
+            alt="Prompt Studio"
+            className="h-16 w-auto"
+          />
+          <div className="text-xs text-slate-500">
+            Version 3.3 - Verified Physics & Auteur Logic
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <main className="max-w-7xl mx-auto px-6 pb-8">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+
+          {/* Left Column: Controls */}
+          <div className="lg:col-span-4">
+            <div className="bg-slate-900/50 border border-slate-800 rounded-xl p-6 space-y-6">
+              <h2 className="text-lg font-bold text-slate-200 flex items-center space-x-2">
+                <Camera className="w-5 h-5 text-cinema-gold" />
+                <span>Technical Specs</span>
+              </h2>
+
+              {/* Application/Lighting Preset */}
+              <div className="space-y-2">
+                <label className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-2">
+                  Application / Lighting
+                  <Info className="w-3 h-3 text-slate-500" />
+                  <span className="text-xs font-normal normal-case">({applicationData.length - 1} presets + Auteur Styles)</span>
+                </label>
+                <select
+                  value={application}
+                  onChange={(e) => setApplication(e.target.value)}
+                  className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-slate-200 focus:border-cinema-gold focus:outline-none focus:ring-2 focus:ring-cinema-gold/20 transition-all"
+                >
+                  <optgroup label="Studio & Portrait">
+                    <option value="Portrait Studio">Portrait Studio</option>
+                    <option value="Corporate Headshot">Corporate Headshot</option>
+                  </optgroup>
+                  <optgroup label="Product & Macro">
+                    <option value="Product (Crisp)">Product (Crisp)</option>
+                    <option value="Food Photography">Food Photography</option>
+                    <option value="Macro: Luxury Jewelry">Macro: Luxury Jewelry</option>
+                    <option value="Macro: Nature Details">Macro: Nature Details</option>
+                  </optgroup>
+                  <optgroup label="Outdoor & Natural">
+                    <option value="Golden Hour (Outdoor)">Golden Hour (Outdoor)</option>
+                    <option value="Blue Hour (City)">Blue Hour (City)</option>
+                    <option value="Wildlife / Safari">Wildlife / Safari</option>
+                  </optgroup>
+                  <optgroup label="Action & Motion">
+                    <option value="Sports Action">Sports Action</option>
+                  </optgroup>
+                  <optgroup label="Creative & Artistic">
+                    <option value="Neon Cyberpunk">Neon Cyberpunk</option>
+                    <option value="Nostalgic Memory">Nostalgic Memory</option>
+                    <option value="Fashion Editorial">Fashion Editorial</option>
+                    <option value="Cinematic Horror">Cinematic Horror</option>
+                  </optgroup>
+                  <optgroup label="Documentary & Realism">
+                    <option value="Street Photography">Street Photography</option>
+                    <option value="Architecture">Architecture</option>
+                    <option value="Docu / Realism">Docu / Realism</option>
+                  </optgroup>
+                  <optgroup label="Auteur Styles">
+                    <option value="Symmetrical Whimsy">Symmetrical Whimsy</option>
+                    <option value="IMAX Scale Epic">IMAX Scale Epic</option>
+                    <option value="Clinical Thriller">Clinical Thriller</option>
+                    <option value="Brutalist Atmosphere">Brutalist Atmosphere</option>
+                    <option value="Technicolor Dream">Technicolor Dream</option>
+                    <option value="Obsessive Symmetry">Obsessive Symmetry</option>
+                    <option value="Hong Kong Nostalgia">Hong Kong Nostalgia</option>
+                    <option value="Industrial Haze">Industrial Haze</option>
+                    <option value="Gothic Fantasy">Gothic Fantasy</option>
+                  </optgroup>
+                  <optgroup label="Other">
+                    <option value="Custom">Custom</option>
+                  </optgroup>
+                </select>
+              </div>
+
+              {/* Camera Body with Lock */}
+              <div className="space-y-2">
+                <label className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-2">
+                  Camera Body
+                  <div
+                    className="relative"
+                    onMouseEnter={() => setShowTooltip('camera')}
+                    onMouseLeave={() => setShowTooltip(null)}
+                  >
+                    <HelpCircle className="w-3 h-3 text-slate-500 cursor-help" />
+                    {showTooltip === 'camera' && (
+                      <Tooltip
+                        text={cameraData.find(c => c.value === camera)?.tooltip}
+                        position="bottom"
+                      />
+                    )}
+                  </div>
+                </label>
+                <div className="relative">
+                  <select
+                    value={camera}
+                    onChange={(e) => setCamera(e.target.value)}
+                    className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-slate-200 focus:border-cinema-gold focus:outline-none focus:ring-2 focus:ring-cinema-gold/20 transition-all"
+                  >
+                    {cameraData.map((cam) => (
+                      <option key={cam.value} value={cam.value}>{cam.display}</option>
+                    ))}
+                  </select>
+                  <div className="text-xs text-slate-500 mt-1">
+                    {cameraData.find(c => c.value === camera)?.tags}
+                  </div>
+                </div>
+              </div>
+
+              {/* Lens Kit with Lock */}
+              <div className="space-y-2">
+                <label className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-2">
+                  Lens Kit
+                  <div
+                    className="relative"
+                    onMouseEnter={() => setShowTooltip('lens')}
+                    onMouseLeave={() => setShowTooltip(null)}
+                  >
+                    <HelpCircle className="w-3 h-3 text-slate-500 cursor-help" />
+                    {showTooltip === 'lens' && (
+                      <Tooltip
+                        text={lensData.find(l => l.value === lens)?.tooltip}
+                        position="bottom"
+                      />
+                    )}
+                  </div>
+                </label>
+                <div className="relative">
+                  <select
+                    value={lens}
+                    onChange={(e) => setLens(e.target.value)}
+                    className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-slate-200 focus:border-cinema-gold focus:outline-none focus:ring-2 focus:ring-cinema-gold/20 transition-all"
+                  >
+                    {compatibleLenses.map((l) => (
+                      <option key={l.value} value={l.value}>{l.display}</option>
+                    ))}
+                  </select>
+                  <div className="text-xs text-slate-500 mt-1">
+                    {compatibleLenses.find(l => l.value === lens)?.keywords}
+                  </div>
+                </div>
+              </div>
+
+              {/* Aspect Ratio */}
+              <div className="space-y-2">
+                <label className="text-xs font-bold text-slate-400 uppercase tracking-wider">
+                  Aspect Ratio
+                </label>
+                <div className="flex flex-wrap gap-2">
+                  {aspectRatios.map((ratio) => (
+                    <button
+                      key={ratio}
+                      onClick={() => setAspectRatio(ratio)}
+                      className={`px-4 py-2 rounded-lg font-medium transition-all ${
+                        aspectRatio === ratio
+                          ? 'bg-cinema-gold text-slate-950'
+                          : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
+                      }`}
+                    >
+                      {ratio}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Info Box */}
+              <div className="bg-slate-800/50 rounded-lg p-4 text-xs text-slate-400">
+                <div className="flex items-start gap-2">
+                  <Info className="w-4 h-4 flex-shrink-0 mt-0.5" />
+                  <div>
+                    <strong>Pro Tip:</strong> Select an Application to auto-configure optimal camera and lens settings.
+                    Use the lock icons to maintain manual control.
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Column: Editor */}
+          <div className="lg:col-span-8 space-y-6">
+            {/* Advanced AI Features */}
+            <div className="space-y-6">
+              {/* Creative Freedom Slider */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <label className="text-sm font-bold text-slate-300 flex items-center gap-2">
+                    <Sliders className="w-4 h-4" />
+                    Creative Freedom
+                  </label>
+                  <span className="text-xs text-cinema-gold font-mono">
+                    {(creativeFreedom * 100).toFixed(0)}%
+                  </span>
+                </div>
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  value={creativeFreedom * 100}
+                  onChange={(e) => setCreativeFreedom(e.target.value / 100)}
+                  className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer slider"
+                  style={{
+                    background: `linear-gradient(to right, #f59e0b 0%, #f59e0b ${creativeFreedom * 100}%, #475569 ${creativeFreedom * 100}%, #475569 100%)`
+                  }}
+                />
+                <div className="flex justify-between text-xs text-slate-500">
+                  <span>Strict (Literal)</span>
+                  <span>Default: 30%</span>
+                  <span>Creative (Smart Fill)</span>
+                </div>
+                <div className="text-xs text-slate-400 bg-slate-800/50 rounded-lg p-3">
+                  <Info className="w-3 h-3 inline mr-1" />
+                  When set high with brief descriptions, AI will intelligently add contextual details based on your selected application.
+                </div>
+              </div>
+
+            </div>
+
+            {/* Scene Description */}
+            <div className="space-y-3">
+              <label className="text-sm font-bold text-slate-300">
+                Scene Description
+              </label>
+              <textarea
+                value={sceneDescription}
+                onChange={(e) => setSceneDescription(e.target.value)}
+                placeholder="Describe your scene... e.g., 'A vintage car parked in front of a neon-lit diner at dusk'"
+                className="w-full h-40 px-4 py-3 bg-slate-900/50 border border-slate-800 rounded-xl text-slate-200 placeholder-slate-500 focus:border-cinema-gold focus:outline-none focus:ring-2 focus:ring-cinema-gold/20 transition-all resize-none"
+              />
+
+              {/* Action Buttons */}
+              <div className="flex gap-3">
+                <button
+                  onClick={generateOptimizedPrompt}
+                  disabled={isGenerating}
+                  className="flex items-center space-x-2 px-6 py-3 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 text-white font-medium rounded-lg transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
+                >
+                  {isGenerating ? (
+                    <>
+                      <Loader2 className="w-5 h-5 animate-spin" />
+                      <span>Optimizing...</span>
+                    </>
+                  ) : (
+                    <>
+                      <Sparkles className="w-5 h-5" />
+                      <span>Nano Banana Optimize</span>
+                    </>
+                  )}
+                </button>
+
+                <button
+                  onClick={generateSimplePrompt}
+                  className="px-6 py-3 bg-slate-800 hover:bg-slate-700 text-slate-300 font-medium rounded-lg transition-all"
+                >
+                  Simple Generate
+                </button>
+              </div>
+
+              {error && (
+                <div className="text-red-400 text-sm bg-red-950/20 border border-red-900/50 rounded-lg px-4 py-2">
+                  {error}
+                </div>
+              )}
+            </div>
+
+            {/* Generated Prompt Output */}
+            <div className="relative bg-gradient-to-br from-slate-900 to-slate-950 border border-slate-800 rounded-xl overflow-hidden">
+              {/* Accent Bar */}
+              <div className="absolute left-0 top-0 bottom-0 w-1 bg-cinema-gold"></div>
+
+              <div className="p-6 space-y-4">
+                <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider">
+                  Nano Banana Optimized Prompt
+                </h3>
+
+                <div className="min-h-[120px]">
+                  {generatedPrompt ? (
+                    <p className="text-slate-200 font-mono text-sm leading-relaxed">
+                      {generatedPrompt}
+                    </p>
+                  ) : (
+                    <p className="text-slate-500 italic">
+                      Your optimized prompt will appear here...
+                    </p>
+                  )}
+                </div>
+
+                {generatedPrompt && (
+                  <div className="flex items-center justify-between pt-4 border-t border-slate-800">
+                    <button
+                      onClick={copyToClipboard}
+                      className="flex items-center space-x-2 px-5 py-2.5 bg-white hover:bg-slate-100 text-slate-950 font-medium rounded-lg transition-all transform hover:scale-105"
+                    >
+                      {copied ? (
+                        <>
+                          <Check className="w-4 h-4" />
+                          <span>Copied!</span>
+                        </>
+                      ) : (
+                        <>
+                          <Copy className="w-4 h-4" />
+                          <span>Copy Prompt</span>
+                        </>
+                      )}
+                    </button>
+
+                    <div className="text-xs text-slate-500">
+                      {generatedPrompt.split(' ').length} words
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Current Settings Display */}
+            <div className="bg-slate-900/30 rounded-lg p-4 space-y-3">
+              <div className="grid grid-cols-2 gap-4 text-xs">
+                <div>
+                  <span className="text-slate-500">Application:</span>
+                  <span className="ml-2 text-slate-300">{application}</span>
+                </div>
+                <div>
+                  <span className="text-slate-500">Camera:</span>
+                  <span className="ml-2 text-slate-300">{camera}</span>
+                </div>
+                <div>
+                  <span className="text-slate-500">Lens:</span>
+                  <span className="ml-2 text-slate-300">{lens}</span>
+                </div>
+                <div>
+                  <span className="text-slate-500">Aspect:</span>
+                  <span className="ml-2 text-slate-300">{aspectRatio}</span>
+                </div>
+              </div>
+              {/* Focus Mode Indicator */}
+              <div className="pt-2 border-t border-slate-800">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs text-slate-500">Focus Mode:</span>
+                  <span className={`text-xs px-2 py-1 rounded-full ${
+                    applicationData.find(app => app.value === application)?.focusType === 'realism'
+                      ? 'bg-green-900/50 text-green-400 border border-green-800'
+                      : 'bg-purple-900/50 text-purple-400 border border-purple-800'
+                  }`}>
+                    {applicationData.find(app => app.value === application)?.focusType === 'realism'
+                      ? '🔬 Realism (Deep Focus)'
+                      : '🎬 Stylistic (Cinematic)'}
+                  </span>
+                </div>
+                <p className="text-xs text-slate-500 mt-2">
+                  {applicationData.find(app => app.value === application)?.focusType === 'realism'
+                    ? 'Prioritizes sharpness and deep focus for technical accuracy.'
+                    : 'Embraces bokeh and depth effects for emotional impact.'}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default CinePromptStudio;
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  }
+}
--- a/src/main.jsx
+++ b/src/main.jsx
@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'cinema-gold': '#f59e0b',
+      },
+      animation: {
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      }
+    },
+  },
+  plugins: [],
+}
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>