Upload 10 files

.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

.gitignore

@@ -22,5 +22,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-.env
-.aider*

README.md

@@ -1,22 +1,14 @@
----
-title: DeepSite
-emoji: 🐳
-colorFrom: blue
-colorTo: blue
-sdk: docker
-pinned: true
-app_port: 5173
-license: mit
-short_description: Generate any application with DeepSeek
-models:
-  - deepseek-ai/DeepSeek-V3-0324
-  - deepseek-ai/DeepSeek-R1-0528
----
+# Run and deploy your AI Studio app
 
-# DeepSite 🐳
+This contains everything you need to run your app locally.
 
-DeepSite is a coding platform powered by DeepSeek AI, designed to make coding smarter and more efficient. Tailored for developers, data scientists, and AI engineers, it integrates generative AI into your coding projects to enhance creativity and productivity.
+## Run Locally
 
-## How to use it locally
+**Prerequisites:**  Node.js
 
-Follow [this discussion](https://huggingface.co/spaces/enzostvs/deepsite/discussions/74)
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

index.css

@@ -0,0 +1,321 @@
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f7f9;
+    color: #333;
+    line-height: 1.6;
+}
+
+#root {
+    display: flex;
+    justify-content: center;
+    padding: 20px;
+    min-height: 100vh;
+    box-sizing: border-box;
+}
+
+.container {
+    background-color: #fff;
+    padding: 30px;
+    border-radius: 12px; /* Slightly more rounded */
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); /* Softer shadow */
+    width: 100%;
+    max-width: 960px; /* Wider for more fields */
+}
+
+h1 {
+    color: #2c3e50;
+    text-align: center;
+    margin-bottom: 35px; /* Increased margin */
+    font-size: 2.2em; /* Slightly larger */
+}
+
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjust minmax for wider layout */
+    gap: 25px; /* Increased gap */
+    margin-bottom: 30px; /* Increased margin */
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-group label {
+    margin-bottom: 10px; /* Increased margin */
+    font-weight: 600;
+    color: #4a5568; /* Slightly different color */
+}
+
+.form-group select,
+.form-group input[type="text"],
+.form-group input[type="url"],
+.form-group input[type="number"],
+.form-group textarea {
+    padding: 14px; /* Increased padding */
+    border: 1px solid #cbd5e0; /* Softer border */
+    border-radius: 8px; /* More rounded */
+    font-size: 1rem;
+    background-color: #fff;
+    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+    color: #2d3748;
+}
+
+.form-group select:focus,
+.form-group input:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: #3182ce; /* Tailwind blue-500 */
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); /* Focus ring */
+}
+
+.form-group textarea {
+    min-height: 120px; /* Increased height */
+    resize: vertical;
+}
+
+.full-width {
+    grid-column: 1 / -1;
+}
+
+.output-controls {
+    margin-top: 10px;
+}
+
+.checkbox-group {
+    display: flex;
+    flex-direction: column; /* Stack checkboxes for better readability */
+    gap: 12px; /* Space between checkboxes */
+    padding: 10px;
+    background-color: #f9fafb;
+    border-radius: 6px;
+    border: 1px solid #e2e8f0;
+}
+
+.checkbox-group label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 500;
+    color: #4a5568;
+    cursor: pointer;
+}
+
+.checkbox-group input[type="checkbox"] {
+    width: 18px; /* Custom size */
+    height: 18px;
+    accent-color: #3182ce;
+}
+
+
+.generate-button {
+    display: block;
+    width: 100%;
+    padding: 16px; /* Increased padding */
+    background-color: #3182ce; /* Tailwind blue-600 */
+    color: white;
+    border: none;
+    border-radius: 8px; /* More rounded */
+    font-size: 1.15rem; /* Slightly larger */
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+    margin-top: 15px;
+    margin-bottom: 35px; /* Increased margin */
+}
+
+.generate-button:hover:not(:disabled) {
+    background-color: #2b6cb0; /* Tailwind blue-700 */
+}
+
+.generate-button:disabled {
+    background-color: #a0aec0; /* Tailwind gray-500 */
+    cursor: not-allowed;
+}
+
+.output-section, .qa-section {
+    margin-top: 35px; /* Increased margin */
+    padding: 25px; /* Increased padding */
+    background-color: #f8fafc; /* Lighter gray */
+    border: 1px solid #e2e8f0; /* Softer border */
+    border-radius: 8px;
+}
+
+.output-section h2, .qa-section h2 {
+    margin-top: 0;
+    color: #2c5282; /* Tailwind blue-800 */
+    border-bottom: 2px solid #3182ce;
+    padding-bottom: 12px;
+    margin-bottom: 20px;
+}
+
+.variation-block {
+    background-color: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.variation-block h3 {
+    margin-top: 0;
+    margin-bottom: 15px;
+    color: #2d3748;
+    font-size: 1.2em;
+}
+
+.output-content {
+    white-space: pre-wrap; 
+    word-wrap: break-word;
+    background-color: #fdfdff; /* Very light background */
+    padding: 15px;
+    border-radius: 4px;
+    border: 1px solid #edf2f7;
+    min-height: 100px;
+    font-family: 'Myanmar3', 'Padauk', 'Noto Sans Myanmar', sans-serif; /* Expanded Burmese fonts */
+    line-height: 1.7;
+    color: #1a202c; /* Darker text for readability */
+}
+
+.output-actions { /* No longer used, buttons are per variation or global export */
+    margin-top: 15px;
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.action-button {
+    padding: 10px 18px; /* Adjusted padding */
+    border-radius: 6px; /* More rounded */
+    font-size: 0.95rem; /* Slightly larger */
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+    border: 1px solid transparent;
+}
+
+.copy-button {
+    background-color: #ebf8ff; /* Tailwind blue-100 */
+    color: #2b6cb0; /* Tailwind blue-700 */
+    border-color: #90cdf4; /* Tailwind blue-300 */
+    margin-top: 15px;
+}
+
+.copy-button:hover {
+    background-color: #bee3f8; /* Tailwind blue-200 */
+    border-color: #63b3ed; /* Tailwind blue-400 */
+}
+
+.export-button {
+    background-color: #38a169; /* Tailwind green-600 */
+    color: white;
+    border-color: #38a169;
+}
+
+.export-button:hover {
+    background-color: #2f855a; /* Tailwind green-700 */
+    border-color: #2f855a;
+}
+
+.export-all-button {
+    display: block; /* Make it full width */
+    width: auto; /* Or specific width if preferred */
+    margin-top: 25px; /* Space above */
+    padding: 12px 20px;
+    font-size: 1rem;
+}
+
+
+.qa-metrics {
+    list-style: none;
+    padding: 0;
+}
+
+.qa-metrics li {
+    margin-bottom: 12px; /* Increased margin */
+    padding: 10px 12px; /* Adjusted padding */
+    border-radius: 6px; /* More rounded */
+    background-color: #e9ecef;
+    color: #495057;
+}
+
+.qa-metrics li strong {
+    color: #2c3e50;
+}
+
+.loading-message, .error-message {
+    text-align: center;
+    padding: 18px; /* Increased padding */
+    margin-top: 25px; /* Increased margin */
+    border-radius: 8px; /* More rounded */
+    font-size: 1.05em;
+}
+
+.loading-message {
+    color: #2b6cb0; /* Tailwind blue-700 */
+    background-color: #ebf8ff; /* Tailwind blue-100 */
+    border: 1px solid #90cdf4; /* Tailwind blue-300 */
+}
+
+.error-message {
+    color: #c53030; /* Tailwind red-700 */
+    background-color: #fff5f5; /* Tailwind red-100 */
+    border: 1px solid #fc8181; /* Tailwind red-400 */
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .container {
+        padding: 20px;
+    }
+    h1 {
+        font-size: 1.9em;
+    }
+    .form-grid {
+        grid-template-columns: 1fr; /* Stack form groups on smaller screens */
+    }
+    .action-button {
+        flex-grow: 1; 
+    }
+    .checkbox-group {
+        flex-direction: column; /* Ensure stacking on small screens too */
+    }
+}
+
+@media (max-width: 480px) {
+    h1 {
+        font-size: 1.6em;
+    }
+    .form-group select,
+    .form-group input,
+    .form-group textarea,
+    .generate-button,
+    .action-button {
+        font-size: 0.95rem;
+    }
+    .generate-button {
+        padding: 14px;
+    }
+    .action-button {
+        padding: 10px 14px;
+    }
+}
+
+/* Ensure Burmese fonts are available if not system-wide */
+@font-face {
+  font-family: 'Noto Sans Myanmar';
+  src: url('https://fonts.gstatic.com/s/notosansmyanmar/v10/AlNativeKyauk.woff2') format('woff2'); /* Replace with actual path or CDN */
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Padauk';
+  src: url('https://fonts.gstatic.com/s/padauk/v7/RrQRboJg-id7OnbBa0_g3Rs.woff2') format('woff2'); /* Replace with actual path or CDN */
+  font-weight: normal;
+  font-style: normal;
+}

index.html

@@ -1,52 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DeepSite | Build with AI ✨</title>
-    <meta
-      name="description"
-      content="DeepSite is a web development tool that
-    helps you build websites with AI, no code required. Let's deploy your
-    website with DeepSite and enjoy the magic of AI."
-    />
-    <meta name="theme-color" content="#000000" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-    <meta name="apple-mobile-web-app-title" content="DeepSite" />
-    <meta name="msapplication-TileColor" content="#000000" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="DeepSite | Build with AI ✨" />
-    <meta
-      name="twitter:description"
-      content="DeepSite is a web development tool that
-    helps you build websites with AI, no code required. Let's deploy your
-    website with DeepSite and enjoy the magic of AI."
-    />
-    <meta name="twitter:image" content="/banner.png" />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="DeepSite | Build with AI ✨" />
-    <meta
-      property="og:description"
-      content="DeepSite is a web development tool that
-    helps you build websites with AI, no code required. Let's deploy your
-    website with DeepSite and enjoy the magic of AI."
-    />
-    <meta property="og:image" content="/banner.png" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Burmese Social Media Content Generator</title>
+    <link rel="stylesheet" href="index.css">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✍️</text></svg>">
+<script type="importmap">
+{
+  "imports": {
+    "react-dom/": "https://esm.sh/react-dom@^19.1.0/",
+    "react": "https://esm.sh/react@^19.1.0",
+    "@google/genai": "https://esm.sh/@google/genai@^1.3.0",
+    "react/": "https://esm.sh/react@^19.1.0/"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+<body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+    <script type="module" src="index.tsx"></script>
+<script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,489 @@
+
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import { GoogleGenAI, GenerateContentResponse } from "@google/genai";
+
+const App = () => {
+    const [platform, setPlatform] = useState<string>('facebook');
+    const [contentType, setContentType] = useState<string>('facebook-post');
+    const [contentLength, setContentLength] = useState<string>('standard');
+    const [contentCategory, setContentCategory] = useState<string>('promotion'); // Kept for general theme
+    const [style, setStyle] = useState<string>('friendly'); // Renamed from tone
+    const [productName, setProductName] = useState<string>('');
+    const [keyMessage, setKeyMessage] = useState<string>('');
+    const [facebookPageLink, setFacebookPageLink] = useState<string>('');
+    const [objective, setObjective] = useState<string>('brand-awareness');
+    const [targetAudience, setTargetAudience] = useState<string>('');
+    const [keywords, setKeywords] = useState<string>('');
+    const [includeCTA, setIncludeCTA] = useState<boolean>(true);
+    const [includeEmojis, setIncludeEmojis] = useState<boolean>(true);
+    const [includeHashtags, setIncludeHashtags] = useState<boolean>(false);
+    const [numVariations, setNumVariations] = useState<number>(1);
+
+    const [generatedContents, setGeneratedContents] = useState<string[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [error, setError] = useState<string | null>(null);
+    // const [copyButtonText, setCopyButtonText] = useState<string>('📋 Copy Content'); // Will be per variation
+
+    const [qaMetrics, setQaMetrics] = useState<{
+        grammar: string;
+        narrativeFlow: string;
+        culturalContext: string;
+        optimizationSuggestion: string;
+        engagementScore: string;
+    } | null>(null);
+
+    const API_KEY = process.env.API_KEY;
+    let ai: GoogleGenAI | null = null;
+    if (API_KEY) {
+      ai = new GoogleGenAI({ apiKey: API_KEY });
+    } else {
+      console.error("API_KEY environment variable not set.");
+    }
+
+    const platformContentTypeOptions: Record<string, Array<{ value: string; label: string }>> = {
+        facebook: [
+            { value: 'facebook-post', label: 'Post (Text, Multimedia)' },
+            { value: 'facebook-story-text', label: 'Story (Text-based)' },
+            { value: 'facebook-ad-copy', label: 'Ad Copy' },
+            { value: 'facebook-reel-script', label: 'Reel Script' },
+        ],
+        instagram: [
+            { value: 'instagram-caption', label: 'Caption (for Post/Reel)' },
+            { value: 'instagram-story-text', label: 'Story (Text-based)' },
+            { value: 'instagram-reel-script', label: 'Reel Script' },
+            { value: 'instagram-ad-copy', label: 'Ad Copy' },
+        ],
+        tiktok: [
+            { value: 'tiktok-video-script', label: 'Video Script' },
+            { value: 'tiktok-ad-script', label: 'Ad Script' },
+        ],
+        youtube: [
+            { value: 'youtube-video-script', label: 'Video Script (Main)' },
+            { value: 'youtube-short-script', label: 'Short Script' },
+            { value: 'youtube-community-post', label: 'Community Post' },
+            { value: 'youtube-video-description', label: 'Video Description' },
+        ],
+        viber: [
+            { value: 'viber-broadcast', label: 'Broadcast Message' },
+            { value: 'viber-channel-update', label: 'Channel Update' },
+        ],
+        telegram: [
+            { value: 'telegram-channel-post', label: 'Channel Post' },
+            { value: 'telegram-group-message', label: 'Group Message' },
+        ]
+    };
+
+    const simplifiedLengthOptions = [
+        { value: 'concise', label: 'Concise / Short' },
+        { value: 'standard', label: 'Standard / Medium' },
+        { value: 'detailed', label: 'Detailed / Long' },
+    ];
+
+    const styleOptions = [
+        { value: 'polite', label: 'Polite (Formal Burmese)' },
+        { value: 'friendly', label: 'Friendly (Casual Burmese)' },
+        { value: 'professional', label: 'Professional (Business Burmese)'},
+        { value: 'humorous', label: 'Humorous' },
+        { value: 'persuasive', label: 'Persuasive' },
+        { value: 'urgent', label: 'Urgent' },
+        { value: 'empathetic', label: 'Empathetic' },
+    ];
+
+    const objectiveOptions = [
+        { value: 'brand-awareness', label: 'Brand Awareness' },
+        { value: 'lead-generation', label: 'Lead Generation' },
+        { value: 'sales', label: 'Sales / Conversions' },
+        { value: 'engagement', label: 'Engagement (Likes, Comments, Shares)' },
+        { value: 'educate', label: 'Educate Audience' },
+        { value: 'event-promotion', label: 'Event Promotion'},
+    ];
+
+    useEffect(() => {
+        const currentPlatformOptions = platformContentTypeOptions[platform] || [];
+        if (currentPlatformOptions.length > 0 && !currentPlatformOptions.find(opt => opt.value === contentType)) {
+            setContentType(currentPlatformOptions[0].value);
+        }
+         // Ensure contentLength is valid for the simplified options
+        if (!simplifiedLengthOptions.find(opt => opt.value === contentLength)) {
+            setContentLength(simplifiedLengthOptions[0].value); // Default to first option if current is invalid
+        }
+    }, [platform, contentType, contentLength]); // Added contentLength to dependencies
+
+    const handleGenerateContent = async () => {
+        if (!ai) {
+            setError("Gemini AI client is not initialized. Check API Key configuration.");
+            return;
+        }
+        if (!productName.trim() && !keyMessage.trim() && contentCategory !== 'seasonal' && objective !== 'brand-awareness') {
+             setError("Please enter Product/Service Name or Key Message/Details, or select a broader category/objective.");
+             return;
+        }
+
+
+        setIsLoading(true);
+        setError(null);
+        setGeneratedContents([]);
+        setQaMetrics(null);
+
+        let lengthInstruction = "";
+        switch (contentLength) {
+            case 'concise':
+                lengthInstruction = "a concise and short piece of content.";
+                break;
+            case 'standard':
+                lengthInstruction = "a standard length piece of content, providing adequate detail.";
+                break;
+            case 'detailed':
+                lengthInstruction = "a detailed and comprehensive piece of content.";
+                break;
+            default:
+                lengthInstruction = "a standard length piece of content.";
+        }
+
+        const selectedContentTypeLabel = platformContentTypeOptions[platform]?.find(opt => opt.value === contentType)?.label || contentType;
+        const selectedStyleLabel = styleOptions.find(opt => opt.value === style)?.label || style;
+        const selectedObjectiveLabel = objectiveOptions.find(opt => opt.value === objective)?.label || objective;
+        const capitalizedCategory = contentCategory.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+
+
+        const prompt = `
+You are an expert Burmese social media copywriter with deep understanding of native Burmese speaker patterns and cultural nuances relevant to Myanmar.
+Your style should emulate successful content found on Myanmar social media business pages and promotional posts.
+
+Generate ${numVariations} distinct variation(s) of content based on the following specifications:
+- Language: Burmese
+- Platform: ${platform.charAt(0).toUpperCase() + platform.slice(1)}
+- Content Type: ${selectedContentTypeLabel}
+- Desired Content Scope/Length: Generate ${lengthInstruction}
+- Primary Objective/Goal: ${selectedObjectiveLabel}
+- Content Theme/Category: ${capitalizedCategory}
+- Style: ${selectedStyleLabel} (translate this style appropriately into Burmese)
+${productName.trim() ? `- Product/Service Name: "${productName}"` : ''}
+${keyMessage.trim() ? `- Key Message/Details: "${keyMessage}"` : ''}
+${targetAudience.trim() ? `- Target Audience: "${targetAudience}"` : ''}
+${keywords.trim() ? `- Keywords to incorporate (if natural): "${keywords}"` : ''}
+${facebookPageLink.trim() ? `- Business Context/Reference Facebook Page: ${facebookPageLink.trim()}. (Adapt to their style if possible)` : ''}
+
+Output Instructions:
+- Ensure each variation is clearly separated by "---VARIATION SEPARATOR---". If only 1 variation is requested, this separator is not needed.
+- For each variation:
+    ${includeEmojis ? "- Seamlessly integrate relevant Burmese-style emojis." : "- Do not use emojis unless absolutely essential for the content type."}
+    ${includeCTA ? `- Include a clear and natural-sounding Call To Action (CTA) suitable for the platform and objective.` : "- A direct Call To Action is not a priority unless inherent to the content type."}
+    ${includeHashtags ? `- Include a few relevant and effective hashtags (Burmese or English as appropriate).` : "- Do not include hashtags unless specifically requested by the content type itself."}
+- Ensure the output is ONLY the generated Burmese content, ready to be used.
+- Focus on creating engaging, grammatically correct, and culturally appropriate content for the Myanmar market.
+- If the content type is a script (e.g., Reel Script, Video Script), format it appropriately with scene descriptions or speaker cues if applicable.
+
+Please provide exactly ${numVariations} variation(s).
+`;
+
+        try {
+            const response: GenerateContentResponse = await ai.models.generateContent({
+                model: 'gemini-2.5-flash-preview-04-17',
+                contents: prompt,
+            });
+            
+            const text = response.text;
+            if (numVariations > 1) {
+                setGeneratedContents(text.split("---VARIATION SEPARATOR---").map(v => v.trim()).filter(v => v));
+            } else {
+                setGeneratedContents([text.trim()]);
+            }
+            
+
+            // Simulate QA metrics (applied to the first variation for simplicity)
+            setQaMetrics({
+                grammar: Math.random() > 0.15 ? '✅ Excellent Burmese Grammar' : '⚠️ Review Grammar Advised',
+                narrativeFlow: Math.random() > 0.2 ? '👍 Coherent Narrative Flow' : '🤔 Flow Could Be Smoother',
+                culturalContext: Math.random() > 0.1 ? '✅ Culturally Appropriate for Myanmar' : '❓ Verify Cultural Context Locally',
+                optimizationSuggestion: ['Consider A/B testing variations.', 'Analyze competitor content for this objective.', 'Ensure the visual pairing matches the text.'][Math.floor(Math.random() * 3)],
+                engagementScore: `Predicted: ${Math.floor(Math.random() * 31) + 65}% Engagement`
+            });
+
+        } catch (e: any) {
+            console.error("Error generating content:", e);
+            setError(`Failed to generate content. ${e.message || 'Please try again.'}`);
+            setGeneratedContents([]);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+    
+    const handleCopyVariation = (textToCopy: string, variationIndex: number) => {
+        navigator.clipboard.writeText(textToCopy)
+            .then(() => {
+                // Visually indicate copy success, perhaps on the button itself
+                const button = document.getElementById(`copy-button-${variationIndex}`);
+                if (button) {
+                    const originalText = button.innerHTML;
+                    button.innerHTML = '✅ Copied!';
+                    setTimeout(() => { button.innerHTML = originalText; }, 2000);
+                }
+            })
+            .catch(err => {
+                console.error('Failed to copy variation: ', err);
+                setError('Failed to copy content to clipboard.');
+            });
+    };
+
+    const handleExportContent = () => {
+        if (generatedContents.length > 0) {
+            const allContent = generatedContents.map((content, index) => {
+                return `--- Variation ${index + 1} ---\n${content}\n\n`;
+            }).join('');
+            const blob = new Blob([allContent], { type: 'text/plain;charset=utf-8' });
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(blob);
+            link.download = 'burmese_social_media_content.txt';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            URL.revokeObjectURL(link.href);
+        }
+    };
+    
+    const currentPlatformContentTypeOptions = platformContentTypeOptions[platform] || [];
+
+    return (
+        <div className="container">
+            <h1>✍️ Burmese Social Media Content Generator V2</h1>
+
+            {!API_KEY && (
+                 <div className="error-message" role="alert">
+                    API Key is not configured. This application requires the API_KEY environment variable to be set to function.
+                 </div>
+            )}
+
+            <div className="form-grid">
+                {/* Platform */}
+                <div className="form-group">
+                    <label htmlFor="platform">Platform</label>
+                    <select id="platform" value={platform} onChange={(e) => setPlatform(e.target.value)} aria-label="Platform">
+                        {Object.keys(platformContentTypeOptions).map(plat => (
+                            <option key={plat} value={plat}>{plat.charAt(0).toUpperCase() + plat.slice(1)}</option>
+                        ))}
+                    </select>
+                </div>
+
+                {/* Content Type (Dynamic) */}
+                <div className="form-group">
+                    <label htmlFor="contentType">Content Type</label>
+                    <select 
+                        id="contentType" 
+                        value={contentType} 
+                        onChange={(e) => setContentType(e.target.value)} 
+                        aria-label="Content Type"
+                        disabled={currentPlatformContentTypeOptions.length === 0}
+                    >
+                        {currentPlatformContentTypeOptions.map(option => (
+                            <option key={option.value} value={option.value}>{option.label}</option>
+                        ))}
+                    </select>
+                </div>
+                
+                {/* Content Length/Scope */}
+                <div className="form-group">
+                    <label htmlFor="contentLength">Content Length/Scope</label>
+                    <select id="contentLength" value={contentLength} onChange={(e) => setContentLength(e.target.value)} aria-label="Content Length or Scope">
+                        {simplifiedLengthOptions.map(option => (
+                            <option key={option.value} value={option.value}>{option.label}</option>
+                        ))}
+                    </select>
+                </div>
+
+                {/* Objective/Goal */}
+                <div className="form-group">
+                    <label htmlFor="objective">Objective/Goal</label>
+                    <select id="objective" value={objective} onChange={(e) => setObjective(e.target.value)} aria-label="Objective or Goal">
+                        {objectiveOptions.map(option => (
+                            <option key={option.value} value={option.value}>{option.label}</option>
+                        ))}
+                    </select>
+                </div>
+                
+                {/* Style (was Tone) */}
+                 <div className="form-group">
+                    <label htmlFor="style">Style</label>
+                    <select id="style" value={style} onChange={(e) => setStyle(e.target.value)} aria-label="Content Style">
+                        {styleOptions.map(option => (
+                             <option key={option.value} value={option.value}>{option.label}</option>
+                        ))}
+                    </select>
+                </div>
+
+                {/* Content Category (General Theme) */}
+                <div className="form-group">
+                    <label htmlFor="contentCategory">Content Theme/Category</label>
+                    <select id="contentCategory" value={contentCategory} onChange={(e) => setContentCategory(e.target.value)} aria-label="Content Category or Theme">
+                        <option value="promotion">Product/Service Promotions</option>
+                        <option value="info">Information/Specifications</option>
+                        <option value="seasonal">Seasonal Greetings/Wishes</option>
+                        <option value="explainer">Explainer Content</option>
+                        <option value="sales">Sales Announcements</option>
+                        <option value="creative-ad">Creative Story/Advertisement</option>
+                        <option value="tutorial">Tutorial/How-to</option>
+                        <option value="behind-the-scenes">Behind The Scenes</option>
+                        <option value="user-generated-content">User-Generated Content Spotlight</option>
+                        <option value="question-answer">Question & Answer</option>
+                    </select>
+                </div>
+
+
+                {/* Product/Service Name */}
+                <div className="form-group full-width">
+                    <label htmlFor="productName">Product/Service Name (Optional if covered by Key Message)</label>
+                    <input
+                        type="text"
+                        id="productName"
+                        value={productName}
+                        onChange={(e) => setProductName(e.target.value)}
+                        placeholder="e.g., Shwe Coffee Mix, Yangon Tech Services"
+                        aria-label="Product or Service Name"
+                    />
+                </div>
+
+                {/* Key Message/Details */}
+                <div className="form-group full-width">
+                    <label htmlFor="keyMessage">Key Message/Details/Topic</label>
+                    <textarea
+                        id="keyMessage"
+                        value={keyMessage}
+                        onChange={(e) => setKeyMessage(e.target.value)}
+                        placeholder="e.g., Special discount, new features, benefits, topic of the content..."
+                        aria-label="Key Message, Details or Topic"
+                        aria-required="true"
+                    ></textarea>
+                </div>
+
+                {/* Target Audience */}
+                 <div className="form-group full-width">
+                    <label htmlFor="targetAudience">Target Audience (Optional)</label>
+                    <textarea
+                        id="targetAudience"
+                        value={targetAudience}
+                        onChange={(e) => setTargetAudience(e.target.value)}
+                        placeholder="e.g., Young adults in Yangon, small business owners, families with children"
+                        aria-label="Target Audience"
+                    ></textarea>
+                </div>
+
+                {/* Keywords */}
+                <div className="form-group full-width">
+                    <label htmlFor="keywords">Keywords (Comma separated, Optional)</label>
+                    <input
+                        type="text"
+                        id="keywords"
+                        value={keywords}
+                        onChange={(e) => setKeywords(e.target.value)}
+                        placeholder="e.g., organic, sustainable, best coffee, tech solutions"
+                        aria-label="Keywords, comma separated"
+                    />
+                </div>
+                
+                 <div className="form-group full-width">
+                    <label htmlFor="facebookPageLink">Business Facebook Page Link (Optional for style reference)</label>
+                    <input
+                        type="url"
+                        id="facebookPageLink"
+                        value={facebookPageLink}
+                        onChange={(e) => setFacebookPageLink(e.target.value)}
+                        placeholder="e.g., https://www.facebook.com/yourbusinesspage"
+                        aria-label="Facebook Page Link (Optional for style reference)"
+                    />
+                </div>
+
+                {/* Output Controls */}
+                <div className="form-group full-width output-controls">
+                    <label>Output Controls:</label>
+                    <div className="checkbox-group">
+                        <label htmlFor="includeCTA">
+                            <input type="checkbox" id="includeCTA" checked={includeCTA} onChange={(e) => setIncludeCTA(e.target.checked)} />
+                            Include Call-to-Action (CTA)
+                        </label>
+                        <label htmlFor="includeEmojis">
+                            <input type="checkbox" id="includeEmojis" checked={includeEmojis} onChange={(e) => setIncludeEmojis(e.target.checked)} />
+                            Include Emojis
+                        </label>
+                        <label htmlFor="includeHashtags">
+                            <input type="checkbox" id="includeHashtags" checked={includeHashtags} onChange={(e) => setIncludeHashtags(e.target.checked)} />
+                            Include Hashtags
+                        </label>
+                    </div>
+                </div>
+                 {/* Number of Variations */}
+                <div className="form-group">
+                    <label htmlFor="numVariations">Number of Variations (1-3)</label>
+                    <input 
+                        type="number" 
+                        id="numVariations" 
+                        value={numVariations}
+                        onChange={(e) => setNumVariations(Math.max(1, Math.min(3, parseInt(e.target.value, 10) || 1)))}
+                        min="1" 
+                        max="3"
+                        aria-label="Number of content variations"
+                    />
+                </div>
+            </div>
+
+
+            <button
+                className="generate-button"
+                onClick={handleGenerateContent}
+                disabled={isLoading || !API_KEY}
+                aria-label="Generate Social Media Content"
+            >
+                {isLoading ? 'Generating...' : `✨ Generate ${numVariations} Variation(s)`}
+            </button>
+
+            {error && <div className="error-message" role="alert">{error}</div>}
+            
+            {isLoading && <div className="loading-message" aria-busy="true" aria-live="assertive">Generating Burmese content, please wait...</div>}
+
+            {generatedContents.length > 0 && (
+                <div className="output-section">
+                    <h2>Generated Content (Burmese)</h2>
+                    {generatedContents.map((content, index) => (
+                        <div key={index} className="variation-block">
+                            <h3>Variation {index + 1}</h3>
+                            <div className="output-content" aria-live="polite">{content}</div>
+                            <button 
+                                id={`copy-button-${index}`}
+                                onClick={() => handleCopyVariation(content, index)} 
+                                className="action-button copy-button"
+                                aria-label={`Copy variation ${index + 1} to clipboard`}
+                            >
+                                📋 Copy Variation {index + 1}
+                            </button>
+                        </div>
+                    ))}
+                    {generatedContents.length > 0 && (
+                         <button 
+                            onClick={handleExportContent} 
+                            className="action-button export-button export-all-button" 
+                            aria-label="Export all generated variations as a text file"
+                        >
+                            💾 Export All as .txt
+                        </button>
+                    )}
+                </div>
+            )}
+
+            {qaMetrics && generatedContents.length > 0 && (
+                <div className="qa-section">
+                    <h2>Content Quality Assurance (Simulated for Variation 1)</h2>
+                    <ul className="qa-metrics">
+                        <li><strong>Grammar:</strong> {qaMetrics.grammar}</li>
+                        <li><strong>Narrative Flow:</strong> {qaMetrics.narrativeFlow}</li>
+                        <li><strong>Cultural Context:</strong> {qaMetrics.culturalContext}</li>
+                        <li><strong>Optimization Suggestion:</strong> {qaMetrics.optimizationSuggestion}</li>
+                        <li><strong>Engagement Predictor:</strong> {qaMetrics.engagementScore}</li>
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+};
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(<React.StrictMode><App /></React.StrictMode>);

metadata.json

@@ -0,0 +1,6 @@
+{
+  "name": "Burmese Social Media Content Generator",
+  "description": "Generates Burmese social media content (text posts, video scripts) using Gemini AI, with options for category, tone, and length. Includes simulated content quality assurance.",
+  "requestFramePermissions": [],
+  "prompt": ""
+}

package.json

@@ -1,67 +1,21 @@
 {
-  "name": "html-space-editor",
+  "name": "burmese-social-media-content-generator",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "start": "node server.js"
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@huggingface/hub": "^1.1.1",
-    "@huggingface/inference": "^3.6.1",
-    "@monaco-editor/react": "^4.7.0",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toggle": "^1.1.9",
-    "@radix-ui/react-toggle-group": "^1.1.10",
-    "@radix-ui/react-tooltip": "^1.2.7",
-    "@tailwindcss/vite": "^4.0.15",
-    "@xenova/transformers": "^2.17.2",
-    "body-parser": "^1.20.3",
-    "class-variance-authority": "^0.7.1",
-    "classnames": "^2.5.1",
-    "clsx": "^2.1.1",
-    "cookie-parser": "^1.4.7",
-    "dotenv": "^16.4.7",
-    "express": "^4.21.2",
-    "lucide-react": "^0.511.0",
-    "next-themes": "^0.4.6",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-icons": "^5.5.0",
-    "react-markdown": "^10.1.0",
-    "react-speech-recognition": "^4.0.0",
-    "react-toastify": "^11.0.5",
-    "react-use": "^17.6.0",
-    "sonner": "^2.0.3",
-    "tailwind-merge": "^3.3.0",
-    "tailwindcss": "^4.0.15"
+    "react-dom": "^19.1.0",
+    "react": "^19.1.0",
+    "@google/genai": "^1.3.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.21.0",
-    "@types/express": "^5.0.1",
-    "@types/node": "^22.15.21",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "@types/react-speech-recognition": "^3.9.6",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.21.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "globals": "^15.15.0",
-    "tw-animate-css": "^1.3.0",
+    "@types/node": "^22.14.0",
     "typescript": "~5.7.2",
-    "typescript-eslint": "^8.24.1",
     "vite": "^6.2.0"
   }
 }

tsconfig.json

@@ -1,17 +1,30 @@
 {
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ],
   "compilerOptions": {
-    "baseUrl": ".",
+    "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": {
-      "@/*": ["./src/*"]
+      "@/*" :  ["./*"]
     }
   }
 }

vite.config.ts

@@ -1,14 +1,17 @@
-import path from "path";
-import tailwindcss from "@tailwindcss/vite";
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
 
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
+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, '.'),
+        }
+      }
+    };
 });