Update index.html

index.html

@@ -194,8 +194,39 @@
       </div>
     </div>
 
-    <div>
-      <label for="taskFocus">📆 Scene Title / Task Focus</label>
+    <!-- Character Look Preset (new) -->
+    <div id="lookPresetBlock" style="margin-top:0.5rem;">
+      <label style="display:flex; align-items:center; gap:8px; font-weight:600;">
+        <input type="checkbox" id="useLookPreset" checked />
+        Enable Character Look Preset
+      </label>
+      <div id="lookPresetFields" class="row" style="margin-top:0.5rem;">
+        <div>
+          <label for="skinTone">🧑🏽‍ Skin Tone</label>
+          <select id="skinTone">
+            <option>light wheatish</option>
+            <option>wheatish</option>
+            <option>medium tan</option>
+            <option>warm brown</option>
+            <option>deep brown</option>
+          </select>
+        </div>
+        <div id="headCoverWrap">
+          <label for="headCover">🧕 Head Covering (if applicable)</label>
+          <select id="headCover">
+            <option value="auto">Auto</option>
+            <option value="none">None</option>
+            <option value="dupatta">Dupatta (draped)</option>
+            <option value="hijab_wrap">Hijab (wrap)</option>
+            <option value="shayla">Shayla</option>
+            <option value="niqab">Niqab (eyes visible)</option>
+          </select>
+        </div>
+      </div>
+      <div class="note">These presets add culturally-accurate wardrobe, hair, makeup, and accessories to the JSON.</div>
+    </div>
+
+    $0📆 Scene Title / Task Focus</label>
       <select id="taskFocus">
         <option>Lesson Planning</option>
         <option>Quiz Generator</option>
@@ -370,6 +401,56 @@
       </div>
     </div>
 
+    <!-- Voiceover Block (new) -->
+    <div id="voiceoverBlock" style="margin-top:0.5rem;">
+      <label style="display:flex; align-items:center; gap:8px; font-weight:600;">
+        <input type="checkbox" id="useVoiceover" checked />
+        Enable Voiceover
+      </label>
+      <div id="voFields" class="row" style="margin-top:0.5rem;">
+        <div>
+          <label for="voLanguage">🎙 Language</label>
+          <select id="voLanguage">
+            <option value="ur-PK-roman">Urdu (Roman Urdu)</option>
+            <option value="ur-PK">Urdu (Nastaliq)</option>
+            <option value="en-US">English (US)</option>
+            <option value="en-GB">English (UK)</option>
+            <option value="ar-Gulf">Arabic (Gulf)</option>
+            <option value="ar-Levant">Arabic (Levant)</option>
+          </select>
+        </div>
+        <div>
+          <label for="voGender">👤 Voice</label>
+          <select id="voGender">
+            <option value="female">Female</option>
+            <option value="male">Male</option>
+            <option value="youth">Youth</option>
+          </select>
+        </div>
+        <div>
+          <label for="voTone">🎚 Tone</label>
+          <select id="voTone">
+            <option value="cinematic">Cinematic</option>
+            <option value="friendly">Friendly</option>
+            <option value="authoritative">Authoritative</option>
+            <option value="educational">Educational</option>
+            <option value="inspirational">Inspirational</option>
+            <option value="playful">Playful</option>
+          </select>
+        </div>
+        <div>
+          <label for="voPace">⏱ Pace</label>
+          <select id="voPace">
+            <option value="slow">Slow</option>
+            <option value="medium" selected>Medium</option>
+            <option value="fast">Fast</option>
+          </select>
+        </div>
+      </div>
+      <label for="voScript" style="margin-top:0.5rem;">📝 Voiceover Script (optional)</label>
+      <textarea id="voScript" rows="3" placeholder="Write your VO script here... or leave empty to generate later"></textarea>
+    </div>
+
     <div class="row">
       <div>
         <label for="colorPalette">🎨 Color Palette</label>
@@ -437,6 +518,116 @@
     // --- helpers ---
     const $ = (id) => document.getElementById(id);
 
+    // --- Character Look Presets (culturally-aware) ---
+    const LOOK_PRESETS = {
+      "Pakistani Female": {
+        ethnicity: "Pakistani",
+        age_range: "20s–30s",
+        attire: "shalwar kameez with dupatta; modest, contemporary tailoring",
+        fabrics: "lawn or cotton blend; subtle embroidery",
+        accessories: "jhumka earrings; thin bangles",
+        hair: "dark hair, braided or loose soft waves",
+        makeup: "natural base, soft kohl eyeliner, nude/rose lipstick",
+        head_cover_applicable: true
+      },
+      "Pakistani Male": {
+        ethnicity: "Pakistani",
+        age_range: "20s–30s",
+        attire: "shalwar kameez (neutral) or kurta; optional waistcoat",
+        grooming: "trimmed beard or clean‑shaven",
+        accessories: "simple watch",
+        head_cover_applicable: false
+      },
+      "Arab Female": {
+        ethnicity: "Arab",
+        age_range: "20s–30s",
+        attire: "abaya with hijab (neutral/black) or modest dress",
+        accessories: "minimal jewelry",
+        makeup: "defined eyeliner, matte base",
+        hair: "covered if hijab",
+        head_cover_applicable: true
+      },
+      "Arab Male": {
+        ethnicity: "Arab",
+        age_range: "20s–30s",
+        attire: "thobe/kandura (white) or smart casual",
+        accessories: "optional ghutra + agal (Gulf)",
+        grooming: "trimmed beard",
+        head_cover_applicable: false
+      },
+      "South Asian Coach": {
+        ethnicity: "South Asian",
+        age_range: "30s–40s",
+        attire: "smart casual blazer over shirt/kurta; lanyard/clipboard",
+        head_cover_applicable: false
+      },
+      "Young Creator (Female)": {
+        ethnicity: "South Asian",
+        age_range: "18–25",
+        attire: "streetwear/athleisure; denim jacket; sneakers",
+        hair: "loose or ponytail; optional dyed streaks",
+        accessories: "minimal rings/necklace",
+        head_cover_applicable: false
+      },
+      "Young Creator (Male)": {
+        ethnicity: "South Asian",
+        age_range: "18–25",
+        attire: "hoodie/overshirt; cap optional",
+        hair: "short/messy",
+        accessories: "watch/bracelet",
+        head_cover_applicable: false
+      }
+    };
+
+    const PRODUCT_LIST = ["Smartphone","Perfume","Luxury Car","Skincare Product"];
+    const isProduct = (t) => PRODUCT_LIST.includes(t);
+
+    const isFemaleChar = (t) => /Female/i.test(t);
+
+    function resolveHeadCoverDefault(type){
+      if(type === "Pakistani Female") return "dupatta (draped)";
+      if(type === "Arab Female") return "hijab (wrap)";
+      return undefined;
+    }
+
+    function buildSubjectLook(type, skinTone, headCover){
+      const base = LOOK_PRESETS[type];
+      if(!base) return null;
+      const out = { ...base, skin_tone: skinTone };
+      if(base.head_cover_applicable){
+        if(headCover && headCover !== "auto"){
+          out.head_cover = headCover === "none" ? "none" : headCover.replace('_',' ');
+        } else {
+          const def = resolveHeadCoverDefault(type);
+          if(def) out.head_cover = def;
+        }
+      }
+      return out;
+    }
+
+    function buildProCamera(aspect, camera){
+      return {
+        profile: "P.R.O C.A.M.E.R.A",
+        P: "Photoreal lighting, accurate materials, cinematic exposure",
+        R: "Render at 4K master",
+        O: "Optics: 35mm & 85mm primes; shallow depth; creamy bokeh",
+        C: "Camera: full‑frame color science; natural skin tones",
+        A: `Angles: ${camera} + macro inserts for details`,
+        M: "Motion: subtle handheld micro‑jitter at 30fps (if applicable)",
+        E: "Environment motivated by background; practicals for depth",
+        R2: "Rendering: light filmic grain; no oversharpening"
+      };
+    }
+
+    $1
+    function updateVoUiVisibility(){
+      const enabled = $("useVoiceover")?.checked;
+      if($("voFields")) $("voFields").style.display = enabled ? "grid" : "none";
+      if($("voScript") && $("voScript").parentElement) $("voScript").parentElement.style.display = enabled ? "block" : "none";
+    }
+
+}
+
     function handleTaskFocusChange() {
       const selected = $("taskFocus").value;
       $("customTaskWrapper").style.display = selected === "custom" ? "block" : "none";
@@ -492,6 +683,29 @@
       const camera = cameraSel === "auto" ? resolveAutoCamera(variant) : cameraSel;
       const background = backgroundSel === "auto" ? resolveAutoBackground(taskFocus) : backgroundSel;
 
+      // subject look (optional)
+      const useLook = $("useLookPreset")?.checked;
+      const subjectLook = (useLook && !isProduct(characterOrProduct))
+        ? buildSubjectLook(characterOrProduct, $("skinTone")?.value, $("headCover")?.value)
+        : null;
+
+      // P.R.O C.A.M.E.R.A auto-add for realistic/professional intents
+      const styleStr = (visualStyle || "").toLowerCase();
+      const kwStr = (keywordsRaw || "").toLowerCase();
+      const shouldPro = /photo|realistic|professional/.test(styleStr) || kwStr.includes("realistic") || kwStr.includes("dslr") || kwStr.includes("pro camera");
+      const proCamera = shouldPro ? buildProCamera(aspectRatio, camera) : null;
+
+      // Voiceover (optional)
+      const useVo = $("useVoiceover")?.checked;
+      const vo = {
+        enabled: !!useVo,
+        language: $("voLanguage")?.value,
+        voice: $("voGender")?.value,
+        tone: $("voTone")?.value,
+        pace: $("voPace")?.value,
+        script: $("voScript")?.value
+      };
+
       const prompt = {
         domain,
         main_subject: characterOrProduct,
@@ -514,10 +728,14 @@
         color_palette: colorPalette,
         hook,
         finale,
-        keywords: keywordsRaw.split(',').map(s => s.trim()).filter(Boolean),
+        keywords: (keywordsRaw||'').split(',').map(s => s.trim()).filter(Boolean),
         negative_prompt: negativePrompt
       };
 
+      if(subjectLook) prompt.subject_look = subjectLook;
+      if(proCamera) prompt.pro_camera = proCamera;
+      if(useVo) prompt.audio.voiceover = vo;
+
       $("output").textContent = JSON.stringify(prompt, null, 2);
     }
 
@@ -546,6 +764,11 @@
     // initialize
     $("taskFocus").addEventListener('change', handleTaskFocusChange);
     handleTaskFocusChange();
+    if($("characterType")){ $("characterType").addEventListener('change', updateLookUiVisibility); }
+    if($("useLookPreset")){ $("useLookPreset").addEventListener('change', updateLookUiVisibility); }
+    if($("useVoiceover")){ $("useVoiceover").addEventListener('change', updateVoUiVisibility); }
+    updateLookUiVisibility();
+    updateVoUiVisibility();
     // generate a starter prompt so output area isn't empty
     generatePrompt();
   </script>