Upload 28 files

App.tsx

@@ -0,0 +1,306 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { AppStatus, Provider, AppType } from './types';
+import { generateCode } from './services/geminiService';
+import ImageUploader from './components/ImageUploader';
+import CodeDisplay from './components/CodeDisplay';
+import Loader from './components/Loader';
+import PythonIcon from './components/icons/PythonIcon';
+import CppIcon from './components/icons/CppIcon';
+import SparklesIcon from './components/icons/SparklesIcon';
+import ApiConfig from './components/ApiConfig';
+import AppTypeSelector from './components/AppTypeSelector';
+
+const App: React.FC = () => {
+  const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
+  const [appType, setAppType] = useState<AppType | null>(null);
+  const [generatedCode, setGeneratedCode] = useState<string>('');
+  const [generatedFiles, setGeneratedFiles] = useState<Record<string, string> | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string>('');
+  const [imageFiles, setImageFiles] = useState<File[]>([]);
+  const [imagePreviewUrls, setImagePreviewUrls] = useState<string[]>([]);
+  const [instructions, setInstructions] = useState<string>('');
+  const [loadingMessage, setLoadingMessage] = useState<string>('');
+  
+  const [provider, setProvider] = useState<Provider>('gemini');
+  const [geminiApiKey, setGeminiApiKey] = useState<string>('');
+  const [openaiApiKey, setOpenaiApiKey] = useState<string>('');
+  const [anthropicApiKey, setAnthropicApiKey] = useState<string>('');
+
+  useEffect(() => {
+    // Load keys and provider from localStorage on initial render.
+    const savedGeminiKey = localStorage.getItem('geminiApiKey');
+    const savedOpenaiKey = localStorage.getItem('openaiApiKey');
+    const savedAnthropicKey = localStorage.getItem('anthropicApiKey');
+    const savedProvider = localStorage.getItem('provider') as Provider;
+
+    if (savedGeminiKey) setGeminiApiKey(savedGeminiKey);
+    if (savedOpenaiKey) setOpenaiApiKey(savedOpenaiKey);
+    if (savedAnthropicKey) setAnthropicApiKey(savedAnthropicKey);
+    if (savedProvider) setProvider(savedProvider);
+
+    // Effect to clean up object URLs
+    return () => {
+      imagePreviewUrls.forEach(url => URL.revokeObjectURL(url));
+    };
+  }, []); // Run only once on mount
+  
+  const resetStateForNewRun = () => {
+      setGeneratedCode('');
+      setGeneratedFiles(null);
+      setErrorMessage('');
+      setStatus(AppStatus.IDLE);
+  }
+
+  const handleProviderChange = (newProvider: Provider) => {
+    setProvider(newProvider);
+    localStorage.setItem('provider', newProvider);
+  };
+
+  const handleApiKeyChange = (keyType: Provider, key: string) => {
+    switch (keyType) {
+      case 'gemini':
+        setGeminiApiKey(key);
+        localStorage.setItem('geminiApiKey', key);
+        break;
+      case 'openai':
+        setOpenaiApiKey(key);
+        localStorage.setItem('openaiApiKey', key);
+        break;
+      case 'anthropic':
+        setAnthropicApiKey(key);
+        localStorage.setItem('anthropicApiKey', key);
+        break;
+    }
+  };
+
+  const fileToBase64 = (file: File): Promise<{mimeType: string, data: string}> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        const result = reader.result as string;
+        const [header, data] = result.split(',');
+        const mimeType = header.match(/:(.*?);/)?.[1] || 'application/octet-stream';
+        resolve({ mimeType, data });
+      };
+      reader.onerror = error => reject(error);
+    });
+  };
+
+  const handleImageUpload = (newFiles: File[]) => {
+    const filesToUpload = newFiles.slice(0, 10);
+    setImageFiles(filesToUpload);
+    // Revoke old URLs before creating new ones to prevent memory leaks
+    imagePreviewUrls.forEach(url => URL.revokeObjectURL(url));
+    setImagePreviewUrls(filesToUpload.map(file => URL.createObjectURL(file)));
+    resetStateForNewRun();
+  };
+
+  const handleRemoveImage = (indexToRemove: number) => {
+    const updatedFiles = imageFiles.filter((_, index) => index !== indexToRemove);
+    URL.revokeObjectURL(imagePreviewUrls[indexToRemove]);
+    const updatedUrls = imagePreviewUrls.filter((_, index) => index !== indexToRemove);
+    setImageFiles(updatedFiles);
+    setImagePreviewUrls(updatedUrls);
+  }
+
+  const handleGenerateClick = useCallback(async () => {
+    if (!appType) return;
+    
+    const apiKeys = { gemini: geminiApiKey, openai: openaiApiKey, anthropic: anthropicApiKey };
+    const apiKey = apiKeys[provider];
+
+    if (!apiKey) {
+      setErrorMessage(`Please provide an API key for ${provider.charAt(0).toUpperCase() + provider.slice(1)}.`);
+      setStatus(AppStatus.ERROR);
+      return;
+    }
+
+    if (imageFiles.length === 0) {
+      setErrorMessage('Please upload at least one image first.');
+      setStatus(AppStatus.ERROR);
+      return;
+    }
+
+    setStatus(AppStatus.PROCESSING);
+    setErrorMessage('');
+    setGeneratedCode('');
+    setGeneratedFiles(null);
+    setLoadingMessage('Preparing to generate...');
+
+    try {
+      const imageParts = await Promise.all(imageFiles.map(file => fileToBase64(file)));
+      
+      const result = await generateCode(
+        appType,
+        provider, 
+        apiKey, 
+        imageParts, 
+        instructions,
+        (statusMsg) => setLoadingMessage(statusMsg),
+        (chunk) => {
+             if (appType === 'python') {
+                 setGeneratedCode(prev => prev + chunk);
+             } else {
+                 // For C++, we accumulate the JSON string representation
+                 setGeneratedCode(prev => prev + chunk);
+             }
+        }
+      );
+      
+      if(appType === 'c++') {
+          try {
+              const finalJsonString = result as string;
+              // Clean potential markdown fences
+              const fenceRegex = /^```(json)?\s*\n?(.*?)\n?\s*```$/s;
+              const match = finalJsonString.match(fenceRegex);
+              const cleanedJson = match ? match[2] : finalJsonString;
+              const files = JSON.parse(cleanedJson);
+              setGeneratedFiles(files);
+              setGeneratedCode(''); // Clear the raw string
+          } catch(e) {
+              console.error("Failed to parse C++ file JSON:", e);
+              throw new Error("AI returned an invalid format for C++ files. Please try again.");
+          }
+      }
+
+      setStatus(AppStatus.SUCCESS);
+    } catch (error) {
+      console.error(error);
+      setErrorMessage(error instanceof Error ? error.message : 'An unknown error occurred.');
+      setStatus(AppStatus.ERROR);
+    }
+  }, [appType, imageFiles, instructions, provider, geminiApiKey, openaiApiKey, anthropicApiKey]);
+  
+  if (!appType) {
+    return <AppTypeSelector onSelect={setAppType} />;
+  }
+  
+  const OutputArea: React.FC = () => {
+    switch (status) {
+      case AppStatus.PROCESSING:
+        return (
+          <div className="flex flex-col items-center justify-center h-full text-center p-4">
+            <Loader />
+            <p className="mt-4 text-lg text-gray-300">{loadingMessage || 'Initializing...'}</p>
+            <p className="text-sm text-gray-500 capitalize">Using {provider} to analyze UI and generate code.</p>
+            { appType === 'python' && generatedCode && 
+              <pre className="mt-4 w-full max-h-64 overflow-y-auto bg-gray-900/50 p-4 rounded-lg text-left">
+                <code className="language-python text-xs font-code whitespace-pre-wrap text-gray-400">
+                  {generatedCode}
+                </code>
+              </pre>
+            }
+          </div>
+        );
+      case AppStatus.SUCCESS:
+        return <CodeDisplay 
+            appType={appType}
+            pythonCode={generatedCode} 
+            cppFiles={generatedFiles}
+            status={status} />;
+      case AppStatus.ERROR:
+        return (
+           <div className="flex items-center justify-center h-full">
+              <div className="text-center bg-red-900/20 border border-red-600 p-6 rounded-lg">
+                  <h3 className="text-2xl font-bold text-red-400">Generation Failed</h3>
+                  <p className="mt-2 text-red-300">{errorMessage}</p>
+              </div>
+          </div>
+        );
+      case AppStatus.IDLE:
+      default:
+        return (
+          <div className="flex flex-col items-center justify-center h-full text-center text-gray-500 p-8">
+            {appType === 'python' ? <PythonIcon className="w-24 h-24 mb-4 opacity-20" /> : <CppIcon className="w-24 h-24 mb-4 opacity-20" />}
+            <h3 className="text-2xl font-semibold text-gray-400">Functional Code Output</h3>
+            <p className="mt-2 max-w-sm">Configure your API, upload UI images, and provide instructions to generate a functional {appType === 'python' ? 'Python' : 'C++'} script.</p>
+          </div>
+        );
+    }
+  };
+
+  const isApiKeyMissing = !( (provider === 'gemini' && geminiApiKey) || (provider === 'openai' && openaiApiKey) || (provider === 'anthropic' && anthropicApiKey) );
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white flex flex-col p-4 sm:p-6 lg:p-8">
+      <header className="text-center mb-8">
+         <button onClick={() => setAppType(null)} className="text-gray-400 hover:text-white mb-4 text-sm">&larr; Back to selection</button>
+        <h1 className="text-4xl sm:text-5xl font-bold bg-gradient-to-r from-green-300 via-blue-400 to-purple-500 text-transparent bg-clip-text">
+          Functional {appType === 'python' ? 'PyQt' : 'C++ Qt'} App Generator
+        </h1>
+        <p className="text-gray-400 mt-2 text-lg">Turn UI Images into Functional {appType === 'python' ? 'Python' : 'C++'} Apps with AI</p>
+      </header>
+
+      <main className="flex-grow grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <div className="bg-gray-800/50 border border-gray-700 rounded-2xl p-6 flex flex-col shadow-2xl shadow-black/20">
+          <div className="flex-grow">
+            <ApiConfig 
+              provider={provider}
+              setProvider={handleProviderChange}
+              apiKeys={{ gemini: geminiApiKey, openai: openaiApiKey, anthropic: anthropicApiKey }}
+              setApiKey={handleApiKeyChange}
+              isProcessing={status === AppStatus.PROCESSING}
+            />
+
+            <div>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-200">1. Upload UI Images</h2>
+              <ImageUploader onImageUpload={handleImageUpload} isProcessing={status === AppStatus.PROCESSING} />
+              {imagePreviewUrls.length > 0 && (
+                <div className="mt-6 w-full">
+                  <p className="text-center mb-3 font-semibold text-gray-300">Image Previews ({imagePreviewUrls.length}/10)</p>
+                  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-4 border-2 border-dashed border-gray-600 rounded-xl bg-gray-900/50 max-h-80 overflow-y-auto">
+                    {imagePreviewUrls.map((url, index) => (
+                      <div key={url} className="relative group aspect-square">
+                        <img src={url} alt={`UI Preview ${index + 1}`} className="w-full h-full object-contain rounded-lg bg-gray-800" />
+                        <button
+                          onClick={() => handleRemoveImage(index)}
+                          disabled={status === AppStatus.PROCESSING}
+                          className="absolute -top-2 -right-2 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                          aria-label={`Remove image ${index + 1}`}
+                        >
+                          &times;
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="mt-8">
+              <h2 className="text-2xl font-semibold mb-4 text-gray-200">2. Add Instructions (Optional)</h2>
+              <textarea
+                value={instructions}
+                onChange={(e) => setInstructions(e.target.value)}
+                disabled={status === AppStatus.PROCESSING}
+                placeholder="e.g., 'Add a dark mode toggle', 'Make the primary button green'"
+                className="w-full h-28 p-3 bg-gray-900/70 border-2 border-gray-600 rounded-xl text-gray-300 placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 resize-none"
+                aria-label="Refinement instructions"
+              />
+            </div>
+          </div>
+          <button
+            onClick={handleGenerateClick}
+            disabled={imageFiles.length === 0 || status === AppStatus.PROCESSING || isApiKeyMissing}
+            className="w-full mt-6 py-4 px-6 rounded-xl bg-gradient-to-r from-blue-500 to-purple-600 text-white font-bold text-lg shadow-lg hover:shadow-xl hover:from-blue-600 hover:to-purple-700 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none flex items-center justify-center gap-3"
+          >
+            <SparklesIcon className="w-6 h-6"/>
+            {status === AppStatus.PROCESSING ? 'Generating...' : '3. Generate Code'}
+          </button>
+        </div>
+        
+        <div className="bg-gray-800/50 border border-gray-700 rounded-2xl flex flex-col shadow-2xl shadow-black/20 overflow-hidden">
+          <h2 className="text-2xl font-semibold p-6 text-gray-200 border-b border-gray-700">Get Your {appType === 'python' ? 'Python' : 'C++'} Code</h2>
+          <div className="flex-grow bg-gray-900/70 overflow-y-auto">
+            <OutputArea />
+          </div>
+        </div>
+      </main>
+       <footer className="text-center mt-8 text-gray-500 text-sm">
+        <p>Powered by AI. Generated code may require adjustments.</p>
+      </footer>
+    </div>
+  );
+};
+
+export default App;

README.md

@@ -0,0 +1,49 @@
+---
+title: UI Generator From Image
+emoji: 🐠
+colorFrom: indigo
+colorTo: red
+sdk: static
+pinned: false
+app_build_command: npm run build
+app_file: build/index.html
+license: mit
+---
+
+# AI-Powered UI to Code Generator
+
+This application allows you to generate functional desktop application code directly from user interface images. It uses a powerful AI process where you can choose your provider (Google Gemini, OpenAI, or Anthropic) and your target language (**Python/PyQt6** or **C++/Qt**). The selected provider will analyze your UI images and then write the complete source code based on that analysis.
+
+## How to Use
+
+1.  **Select Technology:** Choose between generating a **Python PyQt App** or a **C++ Qt App**.
+2.  **Select Provider & Configure API:** Choose your preferred AI provider (Google Gemini, OpenAI, or Anthropic) and enter the corresponding API key. Your key is stored securely in your browser's local storage.
+3.  **Upload Images:** Drag and drop or select one or more images (PNG, JPG, WEBP) of the UI you want to create.
+4.  **Add Instructions (Optional):** Provide text prompts to guide the AI, such as "make the button green" or "the title should be 'My App'".
+5.  **Generate Code:** Click the "Generate Code" button. The code will be generated by the AI.
+6.  **Review, Download & Run:**
+    -   **For Python:** The generated Python code will appear on the right with syntax highlighting. You can copy it or download it as a single `.py` file. Run it locally with `pip install PyQt6 PyQtWebEngine`.
+    -   **For C++:** A multi-file viewer will appear. You can inspect the generated `.h` and `.cpp` files. Before downloading, choose a build system (**CMake**, **Makefile**, or **Meson**). Then, download the complete project as a **ZIP file**, ready to be compiled and run.
+
+## Features
+
+-   **Dual Language Support:** Generate code for both **Python (PyQt6)** and **C++ (Qt)**.
+-   **Multi-Provider Support:** Choose between Google Gemini, OpenAI (GPT-4o), and Anthropic (Claude 3).
+-   **Streaming Output (Python):** Python code is generated and displayed in real-time.
+-   **Multi-File Project Generation (C++):** Creates a complete, structured C++ project (`.h` and `.cpp` files).
+-   **Integrated Build Systems (C++):** Download a ready-to-compile ZIP archive with your choice of `Makefile`, `CMakeLists.txt`, or `meson.build`.
+-   **Syntax Highlighting:** Generated code is properly highlighted for readability.
+-   **Multi-Image Analysis:** Combine multiple screenshots to build a more complex UI.
+-   **Secure API Key Storage:** Keys are saved locally in your browser's storage.
+
+## Technology
+
+This is a static web application built with:
+
+-   React & TypeScript
+-   Tailwind CSS (via CDN)
+-   **AI Providers**: Google Gemini, OpenAI, and Anthropic APIs
+-   **Code Generation Targets**: Python/PyQt6, C++/Qt
+-   **ZIP Archiving**: JSZip
+-   **Syntax Highlighting**: highlight.js
+-   Dependencies served via `esm.sh`

components/ApiConfig.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import KeyIcon from './icons/KeyIcon';
+import GoogleIcon from './icons/GoogleIcon';
+import OpenAIIcon from './icons/OpenAIIcon';
+import AnthropicIcon from './icons/AnthropicIcon';
+import { Provider } from '../types';
+
+interface ApiConfigProps {
+  provider: Provider;
+  setProvider: (provider: Provider) => void;
+  apiKeys: { gemini: string; openai: string; anthropic: string; };
+  setApiKey: (provider: Provider, key: string) => void;
+  isProcessing: boolean;
+}
+
+const ProviderTab: React.FC<{
+  providerName: Provider;
+  activeProvider: Provider;
+  setProvider: (provider: Provider) => void;
+  isProcessing: boolean;
+  children: React.ReactNode;
+}> = ({ providerName, activeProvider, setProvider, isProcessing, children }) => {
+  const isActive = providerName === activeProvider;
+  const activeClasses = 'border-blue-400 text-white bg-gray-700/50';
+  const inactiveClasses = 'border-transparent text-gray-400 hover:bg-gray-700/30 hover:text-gray-200';
+  
+  return (
+    <button
+      onClick={() => setProvider(providerName)}
+      disabled={isProcessing}
+      className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 border-b-2 font-semibold transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-60 ${isActive ? activeClasses : inactiveClasses}`}
+      role="tab"
+      aria-selected={isActive}
+    >
+      {children}
+    </button>
+  );
+};
+
+const ApiConfig: React.FC<ApiConfigProps> = ({
+  provider,
+  setProvider,
+  apiKeys,
+  setApiKey,
+  isProcessing,
+}) => {
+  const providerDetails = {
+    gemini: {
+      name: "Google Gemini",
+      model: "gemini-2.5-flash-preview-04-17",
+      url: "https://aistudio.google.com/app/apikey",
+      urlText: "Google AI Studio",
+      focusColor: "focus:ring-blue-500 focus:border-blue-500",
+    },
+    openai: {
+      name: "OpenAI",
+      model: "gpt-4o",
+      url: "https://platform.openai.com/api-keys",
+      urlText: "OpenAI Dashboard",
+      focusColor: "focus:ring-green-500 focus:border-green-500",
+    },
+    anthropic: {
+      name: "Anthropic",
+      model: "claude-3-sonnet-20240229",
+      url: "https://console.anthropic.com/settings/keys",
+      urlText: "Anthropic Console",
+      focusColor: "focus:ring-purple-500 focus:border-purple-500",
+    }
+  };
+
+  const currentProvider = providerDetails[provider];
+  
+  return (
+    <div className="mb-8">
+      <h2 className="text-2xl font-semibold mb-4 text-gray-200 flex items-center gap-3">
+        <KeyIcon className="w-6 h-6" />
+        AI Provider Configuration
+      </h2>
+      
+      <div className="flex border-b border-gray-700 mb-6" role="tablist">
+        <ProviderTab providerName="gemini" activeProvider={provider} setProvider={setProvider} isProcessing={isProcessing}>
+          <GoogleIcon className="w-5 h-5" /> Gemini
+        </ProviderTab>
+        <ProviderTab providerName="openai" activeProvider={provider} setProvider={setProvider} isProcessing={isProcessing}>
+          <OpenAIIcon className="w-5 h-5" /> OpenAI
+        </ProviderTab>
+        <ProviderTab providerName="anthropic" activeProvider={provider} setProvider={setProvider} isProcessing={isProcessing}>
+          <AnthropicIcon className="w-5 h-5" /> Anthropic
+        </ProviderTab>
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <label htmlFor="api-key" className="block text-sm font-medium text-gray-400 mb-1">
+            {currentProvider.name} API Key
+          </label>
+          <input
+            id="api-key"
+            type="password"
+            value={apiKeys[provider]}
+            onChange={(e) => setApiKey(provider, e.target.value)}
+            disabled={isProcessing}
+            placeholder={`Enter your ${currentProvider.name} API Key`}
+            className={`w-full p-3 bg-gray-900/70 border-2 border-gray-600 rounded-xl text-gray-300 placeholder-gray-500 transition-all duration-200 ${currentProvider.focusColor}`}
+          />
+          <p className="text-xs text-gray-500 mt-1">
+            Using model: <code className="bg-gray-700 px-1 rounded">{currentProvider.model}</code>. Get your key from <a href={currentProvider.url} target="_blank" rel="noopener noreferrer" className="underline hover:text-blue-400">{currentProvider.urlText}</a>.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ApiConfig;

components/AppTypeSelector.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { AppType } from '../types';
+import PythonIcon from './icons/PythonIcon';
+import CppIcon from './icons/CppIcon';
+
+interface AppTypeSelectorProps {
+  onSelect: (appType: AppType) => void;
+}
+
+const SelectionCard: React.FC<{
+    onClick: () => void;
+    icon: React.ReactNode;
+    title: string;
+    description: string;
+}> = ({ onClick, icon, title, description }) => (
+    <button
+        onClick={onClick}
+        className="bg-gray-800/50 border border-gray-700 rounded-2xl p-8 flex flex-col items-center text-center w-full max-w-sm hover:bg-gray-700/50 hover:border-blue-500 transition-all duration-300 transform hover:-translate-y-2 shadow-lg hover:shadow-2xl"
+    >
+        <div className="w-24 h-24 mb-6 text-gray-300">{icon}</div>
+        <h3 className="text-3xl font-bold text-white mb-3">{title}</h3>
+        <p className="text-gray-400">{description}</p>
+    </button>
+);
+
+
+const AppTypeSelector: React.FC<AppTypeSelectorProps> = ({ onSelect }) => {
+  return (
+    <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
+        <div className="text-center mb-12">
+            <h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-green-300 via-blue-400 to-purple-500 text-transparent bg-clip-text">
+              UI-to-Code Generator
+            </h1>
+            <p className="text-gray-400 mt-4 text-xl">Choose your target technology to begin.</p>
+        </div>
+        <div className="flex flex-col md:flex-row gap-8">
+            <SelectionCard
+                onClick={() => onSelect('python')}
+                icon={<PythonIcon />}
+                title="Python PyQt App"
+                description="Generate a single-file, functional Python application using the PyQt6 library. Ideal for rapid prototyping and desktop tools."
+            />
+            <SelectionCard
+                onClick={() => onSelect('c++')}
+                icon={<CppIcon className="p-2" />}
+                title="C++ Qt App"
+                description="Generate a complete, multi-file C++ project using the Qt framework. Includes build files for CMake, Makefile, or Meson."
+            />
+        </div>
+         <footer className="absolute bottom-8 text-center text-gray-500 text-sm">
+            <p>Powered by AI. Select a technology to start turning UI images into functional apps.</p>
+        </footer>
+    </div>
+  );
+};
+
+export default AppTypeSelector;

components/CodeDisplay.tsx

@@ -0,0 +1,241 @@
+import React, { useState, useEffect, useRef } from 'react';
+import JSZip from 'jszip';
+import CopyIcon from './icons/CopyIcon';
+import DownloadIcon from './icons/DownloadIcon';
+import { AppStatus, AppType } from '../types';
+
+interface CodeDisplayProps {
+  appType: AppType;
+  pythonCode?: string;
+  cppFiles?: Record<string, string> | null;
+  status: AppStatus;
+}
+
+const PythonCodeView: React.FC<{ code: string }> = ({ code }) => {
+  const [copyText, setCopyText] = useState('Copy Code');
+  const codeRef = useRef<HTMLElement>(null);
+  const finalCode = code.replace(/\n```$/, '').trim();
+
+  useEffect(() => {
+    // @ts-ignore
+    if (window.hljs && codeRef.current) {
+        // @ts-ignore
+        window.hljs.highlightElement(codeRef.current);
+    }
+  }, [finalCode]);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(finalCode).then(() => {
+      setCopyText('Copied!');
+      setTimeout(() => setCopyText('Copy Code'), 2000);
+    });
+  };
+
+  const handleDownload = () => {
+    const blob = new Blob([finalCode], { type: 'text/python' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'generated_app.py';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+  
+  return (
+    <div className="relative h-full">
+      <div className="absolute top-4 right-4 flex items-center gap-2 z-10">
+        <button onClick={handleDownload} className="flex items-center gap-2 bg-gray-700 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition-all duration-200 text-sm font-semibold" aria-label="Download code">
+          <DownloadIcon className="w-5 h-5" />
+          Download
+        </button>
+        <button onClick={handleCopy} className="flex items-center gap-2 bg-gray-700 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition-all duration-200 text-sm font-semibold" aria-label="Copy code">
+          <CopyIcon className="w-5 h-5" />
+          {copyText}
+        </button>
+      </div>
+      <pre className="h-full w-full overflow-auto p-6 pt-20">
+        <code ref={codeRef} className="language-python text-sm font-code whitespace-pre-wrap text-gray-300">
+          {finalCode}
+        </code>
+      </pre>
+    </div>
+  );
+};
+
+type BuildSystem = 'makefile' | 'cmake' | 'meson';
+
+const CppCodeView: React.FC<{ files: Record<string, string> }> = ({ files }) => {
+    const [activeFile, setActiveFile] = useState(Object.keys(files)[0] || '');
+    const [buildSystem, setBuildSystem] = useState<BuildSystem>('cmake');
+    const [isDownloading, setIsDownloading] = useState(false);
+    const codeRef = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+        // @ts-ignore
+        if (window.hljs && codeRef.current) {
+            // @ts-ignore
+            window.hljs.highlightElement(codeRef.current);
+        }
+    }, [activeFile, files]);
+    
+    const getBuildFileContent = (): { filename: string, content: string } => {
+        const targetName = "MyApp";
+        const sources = Object.keys(files).filter(f => f.endsWith('.cpp')).join(' ');
+        const headers = Object.keys(files).filter(f => f.endsWith('.h')).join(' ');
+
+        switch(buildSystem) {
+            case 'makefile':
+                return {
+                    filename: 'Makefile',
+                    content: `
+CXX = g++
+CXXFLAGS = -std=c++17 -fPIC \`pkg-config --cflags Qt6Widgets Qt6Gui Qt6Core Qt6WebEngineWidgets\`
+LDFLAGS = \`pkg-config --libs Qt6Widgets Qt6Gui Qt6Core Qt6WebEngineWidgets\`
+TARGET = ${targetName}
+SOURCES = ${sources}
+OBJECTS = $(SOURCES:.cpp=.o)
+
+.PHONY: all clean
+
+all: $(TARGET)
+
+$(TARGET): $(OBJECTS)
+\t$(CXX) $(OBJECTS) -o $(TARGET) $(LDFLAGS)
+
+%.o: %.cpp ${headers}
+\t$(CXX) $(CXXFLAGS) -c $< -o $@
+
+clean:
+\trm -f $(OBJECTS) $(TARGET)
+`.trim()
+                };
+            case 'cmake':
+                return {
+                    filename: 'CMakeLists.txt',
+                    content: `
+cmake_minimum_required(VERSION 3.16)
+project(${targetName} VERSION 1.0)
+
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
+set(CMAKE_AUTOUIC ON)
+
+find_package(Qt6 COMPONENTS Widgets Gui Core WebEngineWidgets REQUIRED)
+
+add_executable(\${PROJECT_NAME}
+    ${sources.split(' ').join('\n    ')}
+    ${headers.split(' ').join('\n    ')}
+)
+
+target_link_libraries(\${PROJECT_NAME} PRIVATE Qt6::Widgets Qt6::Gui Qt6::Core Qt6::WebEngineWidgets)
+`.trim()
+                };
+            case 'meson':
+                return {
+                    filename: 'meson.build',
+                    content: `
+project('${targetName}', 'cpp', version : '1.0', default_options : ['cpp_std=c++17'])
+
+qt6 = dependency('qt6', modules: ['Core', 'Gui', 'Widgets', 'WebEngineWidgets'], required: true)
+
+executable(
+    '${targetName}',
+    files(${sources.split(' ').map(s=>`'${s}'`).join(', ')}),
+    dependencies: [qt6],
+    install: true
+)
+`.trim()
+                };
+        }
+    }
+
+    const handleDownloadZip = async () => {
+        setIsDownloading(true);
+        const zip = new JSZip();
+        
+        Object.entries(files).forEach(([name, content]) => {
+            zip.file(name, content);
+        });
+
+        const buildFile = getBuildFileContent();
+        zip.file(buildFile.filename, buildFile.content);
+        
+        try {
+            const content = await zip.generateAsync({type:"blob"});
+            const url = URL.createObjectURL(content);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'qt_app.zip';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        } catch (e) {
+            console.error("Failed to generate ZIP", e);
+        } finally {
+            setIsDownloading(false);
+        }
+    };
+    
+    if (!activeFile) return <div className="p-4 text-gray-400">No files were generated.</div>
+
+    return (
+        <div className="h-full flex flex-col">
+            <div className="flex-shrink-0 flex items-center justify-between border-b border-gray-700 p-2 gap-2 flex-wrap">
+                <div className="flex items-center gap-1 flex-wrap">
+                    {Object.keys(files).map(name => (
+                        <button key={name} onClick={() => setActiveFile(name)} className={`px-3 py-2 text-sm rounded-md transition-colors ${activeFile === name ? 'bg-blue-600 text-white font-semibold' : 'bg-gray-800 hover:bg-gray-700 text-gray-300'}`}>
+                            {name}
+                        </button>
+                    ))}
+                </div>
+            </div>
+             <div className="flex-shrink-0 flex items-center justify-end border-b border-gray-700 p-2 gap-2 flex-wrap bg-gray-800/50">
+                <div className="flex items-center gap-2">
+                    <label htmlFor="build-system" className="text-sm font-medium text-gray-300">Build System:</label>
+                    <select id="build-system" value={buildSystem} onChange={e => setBuildSystem(e.target.value as BuildSystem)} className="bg-gray-700 text-white py-2 px-3 rounded-lg text-sm font-semibold border-0 focus:ring-2 focus:ring-blue-500">
+                        <option value="cmake">CMake</option>
+                        <option value="makefile">Makefile</option>
+                        <option value="meson">Meson</option>
+                    </select>
+                </div>
+                <button onClick={handleDownloadZip} disabled={isDownloading} className="flex items-center gap-2 bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-500 transition-all duration-200 text-sm font-semibold disabled:bg-gray-500">
+                    <DownloadIcon className="w-5 h-5" />
+                    {isDownloading ? 'Zipping...' : 'Download ZIP'}
+                </button>
+            </div>
+            <div className="relative flex-grow overflow-hidden">
+                <pre className="h-full w-full overflow-auto p-6">
+                  <code ref={codeRef} className="language-cpp text-sm font-code whitespace-pre-wrap text-gray-300">
+                    {files[activeFile]}
+                  </code>
+                </pre>
+            </div>
+        </div>
+    );
+};
+
+
+const CodeDisplay: React.FC<CodeDisplayProps> = ({ appType, pythonCode, cppFiles, status }) => {
+  if (status !== AppStatus.SUCCESS) {
+    return <div className="p-4">Generating...</div>;
+  }
+  
+  return (
+    <div className="h-full flex flex-col bg-gray-900 rounded-b-2xl">
+      {appType === 'python' && pythonCode ? (
+        <PythonCodeView code={pythonCode} />
+      ) : appType === 'c++' && cppFiles ? (
+        <CppCodeView files={cppFiles} />
+      ) : (
+        <div className="p-4 text-gray-400">Code generation complete, but no output received.</div>
+      )}
+    </div>
+  );
+};
+
+export default CodeDisplay;

components/ImageUploader.tsx

@@ -0,0 +1,74 @@
+import React, { useRef } from 'react';
+import UploadIcon from './icons/UploadIcon';
+
+interface ImageUploaderProps {
+  onImageUpload: (files: File[]) => void;
+  isProcessing: boolean;
+}
+
+const ImageUploader: React.FC<ImageUploaderProps> = ({ onImageUpload, isProcessing }) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const files = Array.from(event.target.files);
+      if (files.length > 0) {
+        onImageUpload(files);
+      }
+    }
+  };
+
+  const handleClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleDrop = (event: React.DragEvent<HTMLLabelElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isProcessing) return;
+    if (event.dataTransfer.files) {
+      const files = Array.from(event.dataTransfer.files);
+      if (files.length > 0) {
+        onImageUpload(files);
+      }
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLLabelElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  return (
+    <div className="w-full">
+      <label
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        className={`w-full flex flex-col items-center justify-center p-8 border-4 border-dashed rounded-2xl transition-colors duration-300 ${isProcessing ? 'border-gray-600 cursor-not-allowed' : 'border-gray-500 hover:border-blue-500 hover:bg-gray-800 cursor-pointer'}`}
+      >
+        <UploadIcon className="w-16 h-16 mb-4 text-gray-500" />
+        <span className="text-xl font-semibold text-gray-300">Drag & Drop or Click to Upload</span>
+        <span className="mt-1 text-gray-400">Upload up to 10 images (PNG, JPG, WEBP)</span>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/png, image/jpeg, image/webp"
+          className="hidden"
+          onChange={handleFileChange}
+          onClick={(e) => { (e.target as HTMLInputElement).value = '' }} // Allow re-uploading the same file
+          disabled={isProcessing}
+          multiple
+        />
+      </label>
+      <button
+        onClick={handleClick}
+        disabled={isProcessing}
+        className="w-full mt-4 py-3 px-4 bg-gray-700 rounded-lg font-semibold hover:bg-gray-600 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        Or Select File(s)
+      </button>
+    </div>
+  );
+};
+
+export default ImageUploader;

components/Loader.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const Loader: React.FC = () => {
+  return (
+    <svg
+      className="w-20 h-20 animate-spin text-purple-400"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+};
+
+export default Loader;

components/icons/AnthropicIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const AnthropicIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M17.5 22.4286H6.5C5.83696 22.4286 5.20107 22.1672 4.73223 21.6983C4.26339 21.2295 4 20.5936 4 19.9286V4.5C4 3.83696 4.26339 3.20107 4.73223 2.73223C5.20107 2.26339 5.83696 2 6.5 2H17.5C18.163 2 18.7989 2.26339 19.2678 2.73223C19.7366 3.20107 20 3.83696 20 4.5V19.9286C20 20.5936 19.7366 21.2295 19.2678 21.6983C18.7989 22.1672 18.163 22.4286 17.5 22.4286ZM12 8.21429C11.129 8.21429 10.2941 8.56021 9.68153 9.17277C9.06897 9.78534 8.72305 10.6202 8.72305 11.4912V16.6072H11.1159V11.4912C11.1159 11.2334 11.2163 10.9859 11.3967 10.8055C11.5772 10.6251 11.8247 10.5247 12.0824 10.5247H12.277V8.21429H12Z"
+    />
+  </svg>
+);
+
+export default AnthropicIcon;

components/icons/CopyIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const CopyIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+    <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+  </svg>
+);
+
+export default CopyIcon;

components/icons/CppIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const CppIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <g fill="none" stroke="#FFF" strokeWidth="8">
+      <path d="M52 28l-32 36 32 36" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M76 28l32 36-32 36" strokeLinecap="round" strokeLinejoin="round" />
+    </g>
+    <path fill="#FFF" d="M76.5 61.5h-25v-25h-6v25h-25v6h25v25h6v-25h25z" />
+    <path fill="#FFF" d="M124.5 61.5h-25v-25h-6v25h-25v6h25v25h6v-25h25z" />
+  </svg>
+);
+
+export default CppIcon;

components/icons/DownloadIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const DownloadIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+    <polyline points="7 10 12 15 17 10" />
+    <line x1="12" y1="15" x2="12" y2="3" />
+  </svg>
+);
+
+export default DownloadIcon;

components/icons/GoogleIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const GoogleIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg 
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path 
+      d="M21.35,11.1H12.18V13.83H18.68C18.43,15.63 17.22,17.91 14.88,17.91C12.38,17.91 10.33,15.91 10.33,13.33C10.33,10.75 12.38,8.75 14.88,8.75C16.03,8.75 16.93,9.18 17.58,9.8L19.78,7.6C18.08,5.98 16.35,5 14.88,5C10.63,5 6.98,8.38 6.98,13.33C6.98,18.28 10.63,21.66 14.88,21.66C19.13,21.66 21.6,18.68 21.6,13.58C21.6,12.7 21.5,11.85 21.35,11.1Z" 
+      fill="#4285F4"
+    />
+  </svg>
+);
+
+export default GoogleIcon;

components/icons/KeyIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const KeyIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
+  </svg>
+);
+
+export default KeyIcon;

components/icons/OpenAIIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const OpenAIIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    {...props}
+  >
+    <path
+      d="M21.233 14.153l-3.326 1.92a.5.5 0 01-.715-.434v-3.84a.5.5 0 01.715-.434l3.326 1.92a.5.5 0 010 .868zM2.767 9.847l3.326-1.92a.5.5 0 01.715.434v3.84a.5.5 0 01-.715.434l-3.326-1.92a.5.5 0 010-.868zM8.56 3.017l1.92 3.326a.5.5 0 01-.434.715H6.206a.5.5 0 01-.434-.715L7.692 3.017a.5.5 0 01.868 0zM15.44 20.983l-1.92-3.326a.5.5 0 01.434-.715h3.84a.5.5 0 01.434.715l-1.92 3.326a.5.5 0 01-.868 0zM8.994 20.549l-3.59-6.218a.5.5 0 01.434-.715h7.178a.5.5 0 01.434.715l-3.59 6.218a.5.5 0 01-.868 0zM15.006 3.451l3.59 6.218a.5.5 0 01-.434.715H10.994a.5.5 0 01-.434-.715l3.59-6.218a.5.5 0 01.868 0z"
+    ></path>
+  </svg>
+);
+
+export default OpenAIIcon;

components/icons/PythonIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const PythonIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M12.5 22a.5.5 0 0 1-.5-.5v-4.01a1 1 0 0 0-1-1H7.83a1 1 0 0 1-.7-1.71l4.08-4.08a1 1 0 0 0 0-1.42L7.13 5.21a1 1 0 0 1 .7-1.71H11a1 1 0 0 0 1-1V2.5a.5.5 0 0 1 1 0v1.17a1 1 0 0 1-1.71.7l-4.08 4.08a1 1 0 0 0 0 1.42l4.08 4.08a1 1 0 0 1 1.71.7V21.5a.5.5 0 0 1-.5.5zm-1-10.42L8.91 9.01H7v2h2.5a.5.5 0 0 1 .35.15l2.29 2.29-2.29 2.29A.5.5 0 0 1 12.5 16H9v2h1.91l2.57-2.57zM11.5 2a.5.5 0 0 1 .5.5v4.01a1 1 0 0 0 1 1h3.17a1 1 0 0 1 .7 1.71l-4.08 4.08a1 1 0 0 0 0 1.42l4.08 4.08a1 1 0 0 1-.7 1.71H13a1 1 0 0 0-1 1v4.01a.5.5 0 0 1-1 0v-1.17a1 1 0 0 1 1.71-.7l4.08-4.08a1 1 0 0 0 0-1.42l-4.08-4.08a1 1 0 0 1-1.71-.7V2.5a.5.5 0 0 1 .5-.5zm1 10.42L15.09 15H17v-2h-2.5a.5.5 0 0 1-.35-.15L11.86 10.5l2.29-2.29A.5.5 0 0 1 14.5 8H17V6h-1.91l-2.57 2.57z" />
+  </svg>
+);
+
+export default PythonIcon;

components/icons/SparklesIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const SparklesIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        width="24" 
+        height="24" 
+        viewBox="0 0 24 24" 
+        fill="none" 
+        stroke="currentColor" 
+        strokeWidth="2" 
+        strokeLinecap="round" 
+        strokeLinejoin="round"
+        {...props}
+    >
+        <path d="M12 3L9.5 8.5L4 11L9.5 13.5L12 19L14.5 13.5L20 11L14.5 8.5L12 3Z"/>
+        <path d="M5 3v4"/>
+        <path d="M19 17v4"/>
+        <path d="M3 5h4"/>
+        <path d="M17 19h4"/>
+    </svg>
+);
+
+export default SparklesIcon;

components/icons/UploadIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const UploadIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+    <polyline points="17 8 12 3 7 8"></polyline>
+    <line x1="12" x2="12" y1="3" y2="15"></line>
+  </svg>
+);
+
+export default UploadIcon;

index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PyQt UI Generator from Image</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      body {
+        font-family: 'Inter', sans-serif;
+      }
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono&display=swap');
+      .font-code {
+        font-family: 'Roboto Mono', monospace;
+      }
+    </style>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/cpp.min.js"></script>
+  <script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react@^19.1.0",
+    "react/": "https://esm.sh/react@^19.1.0/",
+    "react-dom/": "https://esm.sh/react-dom@^19.1.0/",
+    "@google/genai": "https://esm.sh/@google/genai@^1.7.0",
+    "jszip": "https://esm.sh/jszip@3.10.1"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body class="bg-gray-900">
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>

index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,6 @@
+{
+  "name": "PyQt UI Generator from Image",
+  "description": "An AI-powered tool that analyzes an image of a user interface and generates the corresponding Python code using the PyQt6 library.",
+  "requestFramePermissions": [],
+  "prompt": ""
+}

package-lock.json

@@ -0,0 +1,1417 @@
+{
+  "name": "pyqt-ui-generator-from-image",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "pyqt-ui-generator-from-image",
+      "version": "0.0.0",
+      "dependencies": {
+        "@google/genai": "^1.7.0",
+        "jszip": "3.10.1",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0"
+      },
+      "devDependencies": {
+        "@types/node": "^22.14.0",
+        "typescript": "~5.7.2",
+        "vite": "^6.2.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz",
+      "integrity": "sha512-9o3TMmpmftaCMepOdA5k/yDw8SfInyzWWTjYTFCX3kPSDJMROQTb8jg+h9Cnwnmm1vOzvxN7gIfB5V2ewpjtGA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.5.tgz",
+      "integrity": "sha512-AdJKSPeEHgi7/ZhuIPtcQKr5RQdo6OO2IL87JkianiMYMPbCtot9fxPbrMiBADOWWm3T2si9stAiVsGbTQFkbA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.5.tgz",
+      "integrity": "sha512-VGzGhj4lJO+TVGV1v8ntCZWJktV7SGCs3Pn1GRWI1SBFtRALoomm8k5E9Pmwg3HOAal2VDc2F9+PM/rEY6oIDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.5.tgz",
+      "integrity": "sha512-D2GyJT1kjvO//drbRT3Hib9XPwQeWd9vZoBJn+bu/lVsOZ13cqNdDeqIF/xQ5/VmWvMduP6AmXvylO/PIc2isw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.5.tgz",
+      "integrity": "sha512-GtaBgammVvdF7aPIgH2jxMDdivezgFu6iKpmT+48+F8Hhg5J/sfnDieg0aeG/jfSvkYQU2/pceFPDKlqZzwnfQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.5.tgz",
+      "integrity": "sha512-1iT4FVL0dJ76/q1wd7XDsXrSW+oLoquptvh4CLR4kITDtqi2e/xwXwdCVH8hVHU43wgJdsq7Gxuzcs6Iq/7bxQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.5.tgz",
+      "integrity": "sha512-nk4tGP3JThz4La38Uy/gzyXtpkPW8zSAmoUhK9xKKXdBCzKODMc2adkB2+8om9BDYugz+uGV7sLmpTYzvmz6Sw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.5.tgz",
+      "integrity": "sha512-PrikaNjiXdR2laW6OIjlbeuCPrPaAl0IwPIaRv+SMV8CiM8i2LqVUHFC1+8eORgWyY7yhQY+2U2fA55mBzReaw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.5.tgz",
+      "integrity": "sha512-cPzojwW2okgh7ZlRpcBEtsX7WBuqbLrNXqLU89GxWbNt6uIg78ET82qifUy3W6OVww6ZWobWub5oqZOVtwolfw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.5.tgz",
+      "integrity": "sha512-Z9kfb1v6ZlGbWj8EJk9T6czVEjjq2ntSYLY2cw6pAZl4oKtfgQuS4HOq41M/BcoLPzrUbNd+R4BXFyH//nHxVg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.5.tgz",
+      "integrity": "sha512-sQ7l00M8bSv36GLV95BVAdhJ2QsIbCuCjh/uYrWiMQSUuV+LpXwIqhgJDcvMTj+VsQmqAHL2yYaasENvJ7CDKA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.5.tgz",
+      "integrity": "sha512-0ur7ae16hDUC4OL5iEnDb0tZHDxYmuQyhKhsPBV8f99f6Z9KQM02g33f93rNH5A30agMS46u2HP6qTdEt6Q1kg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.5.tgz",
+      "integrity": "sha512-kB/66P1OsHO5zLz0i6X0RxlQ+3cu0mkxS3TKFvkb5lin6uwZ/ttOkP3Z8lfR9mJOBk14ZwZ9182SIIWFGNmqmg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.5.tgz",
+      "integrity": "sha512-UZCmJ7r9X2fe2D6jBmkLBMQetXPXIsZjQJCjgwpVDz+YMcS6oFR27alkgGv3Oqkv07bxdvw7fyB71/olceJhkQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.5.tgz",
+      "integrity": "sha512-kTxwu4mLyeOlsVIFPfQo+fQJAV9mh24xL+y+Bm6ej067sYANjyEw1dNHmvoqxJUCMnkBdKpvOn0Ahql6+4VyeA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.5.tgz",
+      "integrity": "sha512-K2dSKTKfmdh78uJ3NcWFiqyRrimfdinS5ErLSn3vluHNeHVnBAFWC8a4X5N+7FgVE1EjXS1QDZbpqZBjfrqMTQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.5.tgz",
+      "integrity": "sha512-uhj8N2obKTE6pSZ+aMUbqq+1nXxNjZIIjCjGLfsWvVpy7gKCOL6rsY1MhRh9zLtUtAI7vpgLMK6DxjO8Qm9lJw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.5.tgz",
+      "integrity": "sha512-pwHtMP9viAy1oHPvgxtOv+OkduK5ugofNTVDilIzBLpoWAM16r7b/mxBvfpuQDpRQFMfuVr5aLcn4yveGvBZvw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.5.tgz",
+      "integrity": "sha512-WOb5fKrvVTRMfWFNCroYWWklbnXH0Q5rZppjq0vQIdlsQKuw6mdSihwSo4RV/YdQ5UCKKvBy7/0ZZYLBZKIbwQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.5.tgz",
+      "integrity": "sha512-7A208+uQKgTxHd0G0uqZO8UjK2R0DDb4fDmERtARjSHWxqMTye4Erz4zZafx7Di9Cv+lNHYuncAkiGFySoD+Mw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.5.tgz",
+      "integrity": "sha512-G4hE405ErTWraiZ8UiSoesH8DaCsMm0Cay4fsFWOOUcz8b8rC6uCvnagr+gnioEjWn0wC+o1/TAHt+It+MpIMg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.5.tgz",
+      "integrity": "sha512-l+azKShMy7FxzY0Rj4RCt5VD/q8mG/e+mDivgspo+yL8zW7qEwctQ6YqKX34DTEleFAvCIUviCFX1SDZRSyMQA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.5.tgz",
+      "integrity": "sha512-O2S7SNZzdcFG7eFKgvwUEZ2VG9D/sn/eIiz8XRZ1Q/DO5a3s76Xv0mdBzVM5j5R639lXQmPmSo0iRpHqUUrsxw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.5.tgz",
+      "integrity": "sha512-onOJ02pqs9h1iMJ1PQphR+VZv8qBMQ77Klcsqv9CNW2w6yLqoURLcgERAIurY6QE63bbLuqgP9ATqajFLK5AMQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.5.tgz",
+      "integrity": "sha512-TXv6YnJ8ZMVdX+SXWVBo/0p8LTcrUYngpWjvm91TMjjBQii7Oz11Lw5lbDV5Y0TzuhSJHwiH4hEtC1I42mMS0g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@google/genai": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@google/genai/-/genai-1.7.0.tgz",
+      "integrity": "sha512-s/OZLkrIfBwc+SFFaZoKdEogkw4in0YRTGc4Q483jnfchNBWzrNe560eZEfGJHQRPn6YfzJgECCx0sqEOMWvYw==",
+      "dependencies": {
+        "google-auth-library": "^9.14.2",
+        "ws": "^8.18.0",
+        "zod": "^3.22.4",
+        "zod-to-json-schema": "^3.22.4"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@modelcontextprotocol/sdk": "^1.11.0"
+      },
+      "peerDependenciesMeta": {
+        "@modelcontextprotocol/sdk": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.44.1.tgz",
+      "integrity": "sha512-JAcBr1+fgqx20m7Fwe1DxPUl/hPkee6jA6Pl7n1v2EFiktAHenTaXl5aIFjUIEsfn9w3HE4gK1lEgNGMzBDs1w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.44.1.tgz",
+      "integrity": "sha512-RurZetXqTu4p+G0ChbnkwBuAtwAbIwJkycw1n6GvlGlBuS4u5qlr5opix8cBAYFJgaY05TWtM+LaoFggUmbZEQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.1.tgz",
+      "integrity": "sha512-fM/xPesi7g2M7chk37LOnmnSTHLG/v2ggWqKj3CCA1rMA4mm5KVBT1fNoswbo1JhPuNNZrVwpTvlCVggv8A2zg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.1.tgz",
+      "integrity": "sha512-gDnWk57urJrkrHQ2WVx9TSVTH7lSlU7E3AFqiko+bgjlh78aJ88/3nycMax52VIVjIm3ObXnDL2H00e/xzoipw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.44.1.tgz",
+      "integrity": "sha512-wnFQmJ/zPThM5zEGcnDcCJeYJgtSLjh1d//WuHzhf6zT3Md1BvvhJnWoy+HECKu2bMxaIcfWiu3bJgx6z4g2XA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.44.1.tgz",
+      "integrity": "sha512-uBmIxoJ4493YATvU2c0upGz87f99e3wop7TJgOA/bXMFd2SvKCI7xkxY/5k50bv7J6dw1SXT4MQBQSLn8Bb/Uw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.44.1.tgz",
+      "integrity": "sha512-n0edDmSHlXFhrlmTK7XBuwKlG5MbS7yleS1cQ9nn4kIeW+dJH+ExqNgQ0RrFRew8Y+0V/x6C5IjsHrJmiHtkxQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.44.1.tgz",
+      "integrity": "sha512-8WVUPy3FtAsKSpyk21kV52HCxB+me6YkbkFHATzC2Yd3yuqHwy2lbFL4alJOLXKljoRw08Zk8/xEj89cLQ/4Nw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.1.tgz",
+      "integrity": "sha512-yuktAOaeOgorWDeFJggjuCkMGeITfqvPgkIXhDqsfKX8J3jGyxdDZgBV/2kj/2DyPaLiX6bPdjJDTu9RB8lUPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.1.tgz",
+      "integrity": "sha512-W+GBM4ifET1Plw8pdVaecwUgxmiH23CfAUj32u8knq0JPFyK4weRy6H7ooxYFD19YxBulL0Ktsflg5XS7+7u9g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.44.1.tgz",
+      "integrity": "sha512-1zqnUEMWp9WrGVuVak6jWTl4fEtrVKfZY7CvcBmUUpxAJ7WcSowPSAWIKa/0o5mBL/Ij50SIf9tuirGx63Ovew==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.44.1.tgz",
+      "integrity": "sha512-Rl3JKaRu0LHIx7ExBAAnf0JcOQetQffaw34T8vLlg9b1IhzcBgaIdnvEbbsZq9uZp3uAH+JkHd20Nwn0h9zPjA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.44.1.tgz",
+      "integrity": "sha512-j5akelU3snyL6K3N/iX7otLBIl347fGwmd95U5gS/7z6T4ftK288jKq3A5lcFKcx7wwzb5rgNvAg3ZbV4BqUSw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.44.1.tgz",
+      "integrity": "sha512-ppn5llVGgrZw7yxbIm8TTvtj1EoPgYUAbfw0uDjIOzzoqlZlZrLJ/KuiE7uf5EpTpCTrNt1EdtzF0naMm0wGYg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.44.1.tgz",
+      "integrity": "sha512-Hu6hEdix0oxtUma99jSP7xbvjkUM/ycke/AQQ4EC5g7jNRLLIwjcNwaUy95ZKBJJwg1ZowsclNnjYqzN4zwkAw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.1.tgz",
+      "integrity": "sha512-EtnsrmZGomz9WxK1bR5079zee3+7a+AdFlghyd6VbAjgRJDbTANJ9dcPIPAi76uG05micpEL+gPGmAKYTschQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.1.tgz",
+      "integrity": "sha512-iAS4p+J1az6Usn0f8xhgL4PaU878KEtutP4hqw52I4IO6AGoyOkHCxcc4bqufv1tQLdDWFx8lR9YlwxKuv3/3g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.1.tgz",
+      "integrity": "sha512-NtSJVKcXwcqozOl+FwI41OH3OApDyLk3kqTJgx8+gp6On9ZEt5mYhIsKNPGuaZr3p9T6NWPKGU/03Vw4CNU9qg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.44.1.tgz",
+      "integrity": "sha512-JYA3qvCOLXSsnTR3oiyGws1Dm0YTuxAAeaYGVlGpUsHqloPcFjPg+X0Fj2qODGLNwQOAcCiQmHub/V007kiH5A==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.1.tgz",
+      "integrity": "sha512-J8o22LuF0kTe7m+8PvW9wk3/bRq5+mRo5Dqo6+vXb7otCm3TPhYOJqOaQtGU9YMWQSL3krMnoOxMr0+9E6F3Ug==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true
+    },
+    "node_modules/@types/node": {
+      "version": "22.15.34",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.34.tgz",
+      "integrity": "sha512-8Y6E5WUupYy1Dd0II32BsWAx5MWdcnRd8L84Oys3veg1YrYtNtzgO4CFhiBg6MDSjk7Ay36HYOnU7/tuOzIzcw==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
+      "integrity": "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/bignumber.js": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.3.0.tgz",
+      "integrity": "sha512-EM7aMFTXbptt/wZdMlBv2t8IViwQL+h6SLHosp8Yf0dqJMTnY6iL32opnAB6kAdL0SZPuvcAzFr31o0c/R3/RA==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
+    "node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.5.tgz",
+      "integrity": "sha512-P8OtKZRv/5J5hhz0cUAdu/cLuPIKXpQl1R9pZtvmHWQvrAUVd0UNIPT4IB4W3rNOqVO0rlqHmCIbSwxh/c9yUQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.5",
+        "@esbuild/android-arm": "0.25.5",
+        "@esbuild/android-arm64": "0.25.5",
+        "@esbuild/android-x64": "0.25.5",
+        "@esbuild/darwin-arm64": "0.25.5",
+        "@esbuild/darwin-x64": "0.25.5",
+        "@esbuild/freebsd-arm64": "0.25.5",
+        "@esbuild/freebsd-x64": "0.25.5",
+        "@esbuild/linux-arm": "0.25.5",
+        "@esbuild/linux-arm64": "0.25.5",
+        "@esbuild/linux-ia32": "0.25.5",
+        "@esbuild/linux-loong64": "0.25.5",
+        "@esbuild/linux-mips64el": "0.25.5",
+        "@esbuild/linux-ppc64": "0.25.5",
+        "@esbuild/linux-riscv64": "0.25.5",
+        "@esbuild/linux-s390x": "0.25.5",
+        "@esbuild/linux-x64": "0.25.5",
+        "@esbuild/netbsd-arm64": "0.25.5",
+        "@esbuild/netbsd-x64": "0.25.5",
+        "@esbuild/openbsd-arm64": "0.25.5",
+        "@esbuild/openbsd-x64": "0.25.5",
+        "@esbuild/sunos-x64": "0.25.5",
+        "@esbuild/win32-arm64": "0.25.5",
+        "@esbuild/win32-ia32": "0.25.5",
+        "@esbuild/win32-x64": "0.25.5"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
+    "node_modules/fdir": {
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
+      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "dev": true,
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gaxios": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-6.7.1.tgz",
+      "integrity": "sha512-LDODD4TMYx7XXdpwxAVRAIAuB0bzv0s+ywFonY46k126qzQHT9ygyoa9tncmOiQmmDrik65UYsEkv3lbfqQ3yQ==",
+      "dependencies": {
+        "extend": "^3.0.2",
+        "https-proxy-agent": "^7.0.1",
+        "is-stream": "^2.0.0",
+        "node-fetch": "^2.6.9",
+        "uuid": "^9.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/gcp-metadata": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-6.1.1.tgz",
+      "integrity": "sha512-a4tiq7E0/5fTjxPAaH4jpjkSv/uCaU2p5KC6HVGrvl0cDjA8iBZv4vv1gyzlmK0ZUKqwpOyQMKzZQe3lTit77A==",
+      "dependencies": {
+        "gaxios": "^6.1.1",
+        "google-logging-utils": "^0.0.2",
+        "json-bigint": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/google-auth-library": {
+      "version": "9.15.1",
+      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-9.15.1.tgz",
+      "integrity": "sha512-Jb6Z0+nvECVz+2lzSMt9u98UsoakXxA2HGHMCxh+so3n90XgYWkq5dur19JAJV7ONiJY22yBTyJB1TSkvPq9Ng==",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "ecdsa-sig-formatter": "^1.0.11",
+        "gaxios": "^6.1.1",
+        "gcp-metadata": "^6.1.0",
+        "gtoken": "^7.0.0",
+        "jws": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/google-logging-utils": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/google-logging-utils/-/google-logging-utils-0.0.2.tgz",
+      "integrity": "sha512-NEgUnEcBiP5HrPzufUkBzJOD/Sxsco3rLNo1F1TNf7ieU8ryUzBhqba8r756CjLX7rn3fHl6iLEwPYuqpoKgQQ==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/gtoken": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-7.1.0.tgz",
+      "integrity": "sha512-pCcEwRi+TKpMlxAQObHDQ56KawURgyAf6jtIY046fJ5tIv3zDe/LEIubckAO8fj6JnAxLdmWkUfNyulQ2iKdEw==",
+      "dependencies": {
+        "gaxios": "^6.0.0",
+        "jws": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/json-bigint": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
+      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
+      "dependencies": {
+        "bignumber.js": "^9.0.0"
+      }
+    },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jwa": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
+      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.0.tgz",
+      "integrity": "sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==",
+      "dependencies": {
+        "jwa": "^2.0.0",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "node_modules/react": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
+      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
+      "dependencies": {
+        "scheduler": "^0.26.0"
+      },
+      "peerDependencies": {
+        "react": "^19.1.0"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/rollup": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.44.1.tgz",
+      "integrity": "sha512-x8H8aPvD+xbl0Do8oez5f5o8eMS3trfCghc4HhLAnCkj7Vl0d1JWGs0UF/D886zLW2rOj2QymV/JcSSsw+XDNg==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.44.1",
+        "@rollup/rollup-android-arm64": "4.44.1",
+        "@rollup/rollup-darwin-arm64": "4.44.1",
+        "@rollup/rollup-darwin-x64": "4.44.1",
+        "@rollup/rollup-freebsd-arm64": "4.44.1",
+        "@rollup/rollup-freebsd-x64": "4.44.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.44.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.44.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.44.1",
+        "@rollup/rollup-linux-arm64-musl": "4.44.1",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.44.1",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.44.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.44.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.44.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.44.1",
+        "@rollup/rollup-linux-x64-gnu": "4.44.1",
+        "@rollup/rollup-linux-x64-musl": "4.44.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.44.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.44.1",
+        "@rollup/rollup-win32-x64-msvc": "4.44.1",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/scheduler": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA=="
+    },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "dev": true,
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
+    "node_modules/typescript": {
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
+      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/vite": {
+      "version": "6.3.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
+      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
+      "dev": true,
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
+        "postcss": "^8.5.3",
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/zod": {
+      "version": "3.25.67",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.67.tgz",
+      "integrity": "sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-to-json-schema": {
+      "version": "3.24.6",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.6.tgz",
+      "integrity": "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==",
+      "peerDependencies": {
+        "zod": "^3.24.1"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "pyqt-ui-generator-from-image",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@google/genai": "^1.7.0",
+    "jszip": "3.10.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.2.0"
+  }
+}

services/geminiService.ts

@@ -0,0 +1,254 @@
+import { GoogleGenAI, GenerateContentResponse } from "@google/genai";
+import { Provider, AppType } from '../types';
+
+type ImagePart = {
+    mimeType: string;
+    data: string;
+};
+
+const ANALYSIS_PROMPT_PYTHON = `
+You are an expert UI/UX analyst. Your task is to analyze the provided UI images and user instructions and generate a detailed textual specification for a developer.
+This specification will be used by another AI to write Python PyQt6 code.
+
+**Analysis Steps:**
+1.  **Examine the UI Images:** Identify all UI components (e.g., buttons, input fields, labels, sliders, web views, menus). Note their positions, sizes, colors, and any text they contain.
+2.  **Infer Layout and Structure:** Describe the overall layout of the application (e.g., grid layout, vertical box layout, main window with a status bar). Use PyQt6 layout managers in your description.
+3.  **Determine Functionality:** Based on the components and their context, infer the application's purpose and the function of each element.
+4.  **Incorporate User Instructions:** You MUST integrate any provided user instructions into your specification. These instructions override any inferences from the images. For example, if an image shows a blue button but the user asks to 'make the button green', your specification must describe a green button.
+
+**Output Format:**
+Provide a clear, detailed, and well-structured description of the application. Do NOT write any Python code. The output should be a blueprint that a PyQt6 developer can follow precisely.
+`;
+
+const PYQT_CODEGEN_PROMPT = `
+You are an expert Python developer specializing in PyQt6. Your task is to create a fully functional desktop application based on a detailed specification.
+
+**Instructions:**
+1.  **Read the Specification:** Carefully read the entire application specification provided below.
+2.  **Generate Code:** Write a single, complete, and executable Python script using the PyQt6 library that implements the specification precisely.
+3.  **Implement All Logic:** The generated code must not only replicate the visual layout but also implement all the described functionality.
+    - For web browsers, use PyQt6.QtWebEngineWidgets.
+    - For calculators, ensure all buttons are connected to functions that perform the correct calculations.
+    - For text editors, implement text editing and file operations.
+4.  **Code Requirements:**
+    - The script must be self-contained and runnable.
+    - Include all necessary imports.
+    - Define a main window class (e.g., \`QMainWindow\`).
+    - Connect signals to slots to implement functionality.
+    - Include the standard boilerplate to instantiate and run the \`QApplication\`.
+5.  **Output Format:** Provide ONLY the raw Python code. Do not include any explanations, comments about the code, or markdown fences like \`\`\`python.
+
+--- APPLICATION SPECIFICATION ---
+`;
+
+const ANALYSIS_PROMPT_CPP = `
+You are an expert UI/UX analyst. Your task is to analyze the provided UI images and user instructions and generate a detailed textual specification for a developer.
+This specification will be used by another AI to write a C++ Qt application.
+
+**Analysis Steps:**
+1.  **Examine the UI Images:** Identify all UI components (e.g., QPushButton, QLineEdit, QLabel, QSlider, QWebEngineView, QMenu). Note their positions, sizes, colors, and any text they contain.
+2.  **Infer Layout and Structure:** Describe the overall layout of the application (e.g., QGridLayout, QVBoxLayout, QMainWindow with a QStatusBar). Use C++ Qt layout managers in your description.
+3.  **Determine Functionality:** Based on the components and their context, infer the application's purpose and the function of each element.
+4.  **Incorporate User Instructions:** You MUST integrate any provided user instructions into your specification. These instructions override any inferences from the images. For example, if an image shows a blue button but the user asks to 'make the button green', your specification must describe a green button.
+
+**Output Format:**
+Provide a clear, detailed, and well-structured description of the application. Do NOT write any C++ code. The output should be a blueprint that a C++/Qt developer can follow precisely.
+`;
+
+const CPP_QT_CODEGEN_PROMPT = `
+You are an expert C++ developer specializing in the Qt 6 framework. Your task is to create a fully functional, multi-file desktop application based on a detailed specification.
+
+**Instructions:**
+1.  **Read the Specification:** Carefully read the entire application specification provided below.
+2.  **Generate Code Structure:** Create a complete, compilable, and executable C++/Qt application with the following file structure:
+    - \`main.cpp\`: The main entry point for the application. It should instantiate and show the main window.
+    - \`mainwindow.h\`: The header file for your main window class (e.g., \`MainWindow\`), which should inherit from \`QMainWindow\`. It should declare all UI elements, layouts, and slots.
+    - \`mainwindow.cpp\`: The implementation file for your main window class. It should define the constructor (where the UI is built), and implement all slots (functionality).
+3.  **Implement All Logic:** The generated code must not only replicate the visual layout but also implement all the described functionality.
+    - For web browsers, use QWebEngineView from the QtWebEngineWidgets module.
+    - For calculators, ensure all buttons are connected to slots that perform the correct calculations.
+4.  **Code Requirements:**
+    - Use C++17 or later.
+    - Include header guards in \`.h\` files.
+    - Include all necessary Qt headers.
+    - Connect signals to slots using the modern \`QObject::connect\` syntax.
+    - The code must be clean, well-organized, and ready to be compiled with a standard build system (CMake, qmake, etc.).
+5.  **Output Format:**
+    - You MUST provide the output as a single, valid JSON object.
+    - The keys of the JSON object must be the filenames (e.g., "main.cpp", "mainwindow.h", "mainwindow.cpp").
+    - The values must be strings containing the complete, raw source code for the corresponding file.
+    - Do not include any explanations, comments, or markdown fences like \`\`\`json.
+
+**Example JSON Output:**
+{
+  "main.cpp": "#include \\"mainwindow.h\\"\\n#include <QApplication>\\n\\nint main(int argc, char *argv[])\\n{\\n    QApplication a(argc, argv);\\n    MainWindow w;\\n    w.show();\\n    return a.exec();\\n}",
+  "mainwindow.h": "#ifndef MAINWINDOW_H\\n#define MAINWINDOW_H\\n\\n#include <QMainWindow>\\n\\nclass MainWindow : public QMainWindow\\n{\\n    Q_OBJECT\\n\\npublic:\\n    MainWindow(QWidget *parent = nullptr);\\n    ~MainWindow();\\n};\\n#endif // MAINWINDOW_H",
+  "mainwindow.cpp": "#include \\"mainwindow.h\\"\\n\\nMainWindow::MainWindow(QWidget *parent)\\n    : QMainWindow(parent)\\n{\\n    // UI setup code here\\n}\\n\\nMainWindow::~MainWindow()\\n{\\n}"
+}
+
+--- APPLICATION SPECIFICATION ---
+`;
+
+
+// --- Non-streaming API callers for analysis step ---
+async function callGemini(apiKey: string, prompt: string, imageParts: ImagePart[]): Promise<string> {
+    const ai = new GoogleGenAI({ apiKey });
+    const parts = [{ text: prompt }, ...imageParts.map(img => ({ inlineData: { mimeType: img.mimeType, data: img.data } }))];
+    const response: GenerateContentResponse = await ai.models.generateContent({ model: 'gemini-2.5-flash-preview-04-17', contents: [{ parts }] });
+    return response.text;
+}
+
+async function callOpenAI(apiKey: string, prompt: string, imageParts: ImagePart[]): Promise<string> {
+    const content = [{ type: 'text', text: prompt }, ...imageParts.map(img => ({ type: 'image_url', image_url: { url: `data:${img.mimeType};base64,${img.data}` } }))];
+    const body = { model: 'gpt-4o', messages: [{ role: 'user', content }], max_tokens: 4096 };
+    const response = await fetch('https://api.openai.com/v1/chat/completions', { method: 'POST', headers: { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+    if (!response.ok) { const err = await response.json(); throw new Error(`OpenAI API Error: ${err?.error?.message || response.statusText}`); }
+    const data = await response.json();
+    return data.choices?.[0]?.message?.content ?? '';
+}
+
+async function callAnthropic(apiKey: string, prompt: string, imageParts: ImagePart[]): Promise<string> {
+    const content = [{ type: 'text', text: prompt }, ...imageParts.map(img => ({ type: 'image', source: { type: 'base64', media_type: img.mimeType, data: img.data } }))];
+    const body = { model: 'claude-3-sonnet-20240229', messages: [{ role: 'user', content }], max_tokens: 4096 };
+    const response = await fetch('https://api.anthropic.com/v1/messages', { method: 'POST', headers: { 'x-api-key': apiKey, 'anthropic-version': '2023-06-01', 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+    if (!response.ok) { const err = await response.json(); throw new Error(`Anthropic API Error: ${err?.error?.message || response.statusText}`); }
+    const data = await response.json();
+    return data.content?.[0]?.text ?? '';
+}
+
+// --- Unified Streaming API caller ---
+async function callApiStream(
+    provider: Provider, 
+    apiKey: string, 
+    prompt: string, 
+    onChunk: (chunk: string) => void
+): Promise<string> {
+    const model = provider === 'gemini' ? 'gemini-2.5-flash-preview-04-17' : (provider === 'openai' ? 'gpt-4o' : 'claude-3-sonnet-20240229');
+    let fullResponse = '';
+
+    const processChunk = (chunk: string) => {
+        fullResponse += chunk;
+        onChunk(chunk);
+    };
+
+    if (provider === 'gemini') {
+        const ai = new GoogleGenAI({ apiKey });
+        const response = await ai.models.generateContentStream({ model, contents: prompt });
+        for await (const chunk of response) {
+            processChunk(chunk.text);
+        }
+    } else if (provider === 'openai') {
+        const body = { model, messages: [{ role: 'user', content: prompt }], max_tokens: 4096, stream: true };
+        const response = await fetch('https://api.openai.com/v1/chat/completions', { method: 'POST', headers: { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+        if (!response.ok || !response.body) { const err = await response.json(); throw new Error(`OpenAI API Error: ${err?.error?.message || response.statusText}`); }
+        
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            const chunk = decoder.decode(value);
+            const lines = chunk.split('\n').filter(line => line.startsWith('data: '));
+            for (const line of lines) {
+                const message = line.substring(6);
+                if (message === '[DONE]') break;
+                try {
+                    const json = JSON.parse(message);
+                    const textChunk = json.choices[0]?.delta?.content;
+                    if (textChunk) processChunk(textChunk);
+                } catch (e) { /* Ignore parsing errors for incomplete chunks */ }
+            }
+        }
+    } else if (provider === 'anthropic') {
+        const body = { model, messages: [{ role: 'user', content: prompt }], max_tokens: 4096, stream: true };
+        const response = await fetch('https://api.anthropic.com/v1/messages', { method: 'POST', headers: { 'x-api-key': apiKey, 'anthropic-version': '2023-06-01', 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+        if (!response.ok || !response.body) { const err = await response.json(); throw new Error(`Anthropic API Error: ${err?.error?.message || response.statusText}`); }
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            buffer += decoder.decode(value, { stream: true });
+            const events = buffer.split('\n\n');
+            buffer = events.pop() || ''; // Keep the last, possibly incomplete, event in buffer
+
+            for (const event of events) {
+                if (!event.startsWith('event: content_block_delta')) continue;
+                const dataLine = event.split('\n').find(line => line.startsWith('data: '));
+                if (dataLine) {
+                    try {
+                        const jsonData = JSON.parse(dataLine.substring(6));
+                        if (jsonData.type === 'content_block_delta' && jsonData.delta.type === 'text_delta') {
+                            processChunk(jsonData.delta.text);
+                        }
+                    } catch (e) { /* Ignore incomplete JSON */ }
+                }
+            }
+        }
+    }
+    return fullResponse;
+}
+
+
+export async function generateCode(
+    appType: AppType,
+    provider: Provider,
+    apiKey: string,
+    imageParts: ImagePart[], 
+    instructions: string,
+    onStatusChange: (status: string) => void,
+    onChunk: (chunk: string) => void
+): Promise<string | void> {
+  try {
+      const isPython = appType === 'python';
+      const analysisPromptTemplate = isPython ? ANALYSIS_PROMPT_PYTHON : ANALYSIS_PROMPT_CPP;
+      const codegenPromptTemplate = isPython ? PYQT_CODEGEN_PROMPT : CPP_QT_CODEGEN_PROMPT;
+
+      onStatusChange(`Step 1/2: Analyzing UI with ${provider}...`);
+      const analysisPrompt = `${analysisPromptTemplate}${instructions ? `\n\n--- USER REFINEMENT INSTRUCTIONS ---\n${instructions.trim()}` : ''}`;
+      
+      const callAnalysisApi = {
+          'gemini': callGemini,
+          'openai': callOpenAI,
+          'anthropic': callAnthropic,
+      }[provider];
+
+      const specification = await callAnalysisApi(apiKey, analysisPrompt, imageParts);
+      if (!specification || specification.trim() === '') {
+          throw new Error('AI failed to generate a UI specification. The response was empty.');
+      }
+
+      const lang = isPython ? 'Python' : 'C++';
+      onStatusChange(`Step 2/2: Generating ${lang} code with ${provider}...`);
+      const codegenPrompt = `${codegenPromptTemplate}\n${specification}`;
+      
+      const finalResult = await callApiStream(provider, apiKey, codegenPrompt, (chunk) => {
+          if (isPython) {
+            // The first chunk from some models might be a markdown fence, remove it.
+            const cleanedChunk = chunk.replace(/^```(python)?\n/, '');
+            onChunk(cleanedChunk);
+          } else {
+            // For C++, we just stream raw chunks. The final string will be parsed.
+            onChunk(chunk);
+          }
+      });
+      
+      if (isPython) {
+          // Final cleanup of trailing markdown fence for Python.
+          onChunk('\n```');
+          return; 
+      } else {
+          // For C++, return the complete JSON string for parsing in the component.
+          return finalResult;
+      }
+      
+  } catch (error) {
+      console.error(`Error during code generation with ${provider}:`, error);
+      if (error instanceof Error) {
+          throw new Error(`Failed to communicate with the ${provider} API. ${error.message}`);
+      }
+      throw new Error("An unknown error occurred while generating code.");
+  }
+}

tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "paths": {
+      "@/*" :  ["./*"]
+    }
+  }
+}

types.ts

@@ -0,0 +1,10 @@
+export enum AppStatus {
+  IDLE,
+  PROCESSING,
+  SUCCESS,
+  ERROR,
+}
+
+export type Provider = 'gemini' | 'openai' | 'anthropic';
+
+export type AppType = 'python' | 'c++';

vite.config.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});