change ui style

index.html

@@ -4,141 +4,258 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Camera Interaction App</title>
+    <!-- Add Vazirmatn Persian font from Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;700&display=swap" rel="stylesheet">
     <style>
+      :root {
+        --primary: #2563eb;
+        --primary-dark: #1e40af;
+        --danger: #dc2626;
+        --success: #16a34a;
+        --bg: #f8fafc;
+        --surface: #ffffff;
+        --border: #e5e7eb;
+        --shadow: 0 4px 24px 0 rgba(30, 41, 59, 0.08);
+        --radius: 14px;
+        --font: 'Vazirmatn', 'Inter', 'Segoe UI', Arial, sans-serif;
+      }
+      html, body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
       body {
-        font-family: sans-serif;
+        font-family: var(--font);
+        background: var(--bg);
+        min-height: 100vh;
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 20px;
-        padding: 20px;
-        background-color: #f0f0f0;
+        gap: 32px;
+        padding: 40px 0;
       }
-      .controls,
-      .io-areas {
-        display: flex;
-        gap: 10px;
-        align-items: center;
-        background-color: #fff;
-        padding: 15px;
-        border-radius: 8px;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      h1 {
+        color: var(--primary-dark);
+        font-size: 2.2rem;
+        font-weight: 700;
+        margin-bottom: 0;
+        text-align: center;
+        width: 100%;
+        max-width: 700px;
       }
-      .io-areas {
+      .container {
+        width: 100%;
+        max-width: 700px;
+        display: flex;
         flex-direction: column;
-        align-items: stretch;
+        gap: 32px;
       }
-      textarea {
-        width: 300px;
-        height: 80px;
-        padding: 8px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        font-size: 14px;
+      #videoContainer {
+        position: relative;
+        width: 100%;
+        max-width: 520px;
+        aspect-ratio: 4/3;
+        border-radius: var(--radius);
+        overflow: hidden;
+        box-shadow: var(--shadow);
+        border: 1.5px solid var(--border);
+        background: #000;
+        margin: 0 auto;
       }
       #videoFeed {
-        display: block;
         width: 100%;
         height: 100%;
-        border-radius: 6px;
         object-fit: cover;
-      }
-      #videoContainer {
-        position: relative;
-        width: 480px;
-        height: 360px;
-        border: 2px solid #333;
-        background-color: #000;
-        border-radius: 8px;
-        margin: 0 auto;
+        border-radius: var(--radius);
+        display: block;
       }
       #loadingOverlay {
         position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
+        inset: 0;
         display: none;
         justify-content: center;
         align-items: center;
-        background-color: rgba(0, 0, 0, 0.7);
+        background: rgba(30, 41, 59, 0.7);
         z-index: 10;
-        border-radius: 6px;
-        color: #ffffff;
+        color: #fff;
         font-size: 1.5em;
         font-weight: bold;
+        border-radius: var(--radius);
+        text-align: right;
+      }
+      .io-areas {
+        display: flex;
+        flex-direction: column;
+        gap: 18px;
+        background: var(--surface);
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+        padding: 24px 28px;
+        align-items: stretch;
+        border: 1.5px solid var(--border);
+      }
+      .io-areas > div {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 6px;
+      }
+      label {
+        font-weight: 600;
+        color: var(--primary-dark);
+        font-size: 1rem;
+        text-align: right;
+        width: 100%;
+      }
+      textarea {
+        width: 100%;
+        min-width: 320px;
+        max-width: 600px;
+        height: 8em;
+        min-height: 8em;
+        max-height: 8em;
+        padding: 10px 14px;
+        border: 1.5px solid var(--border);
+        border-radius: 8px;
+        font-size: 1rem;
+        background: var(--bg);
+        color: #222;
+        resize: vertical;
+        box-sizing: border-box;
+        text-align: right;
+        transition: border 0.2s;
+      }
+      textarea:focus {
+        border-color: var(--primary);
+        outline: none;
+        background: #f1f5f9;
+      }
+      .controls {
+        display: flex;
+        gap: 18px;
+        align-items: center;
+        background: var(--surface);
+        padding: 18px 28px;
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+        border: 1.5px solid var(--border);
+        justify-content: flex-start;
+      }
+      .controls label {
+        margin-bottom: 0;
+        font-size: 1rem;
+        color: #334155;
+        font-weight: 500;
+        text-align: right;
+        width: auto;
+      }
+      select {
+        padding: 8px 14px;
+        border-radius: 8px;
+        border: 1.5px solid var(--border);
+        font-size: 1rem;
+        background: var(--bg);
+        color: #222;
+        text-align: right;
+        min-width: 90px;
+        transition: border 0.2s;
+      }
+      select:focus {
+        border-color: var(--primary);
+        outline: none;
       }
       #startButton {
-        padding: 10px 20px;
-        font-size: 16px;
+        padding: 10px 28px;
+        font-size: 1.1rem;
+        font-weight: 600;
         cursor: pointer;
         border: none;
-        border-radius: 4px;
-        color: white;
+        border-radius: 8px;
+        color: #fff;
+        transition: background 0.2s, box-shadow 0.2s;
+        box-shadow: 0 2px 8px 0 rgba(37, 99, 235, 0.08);
       }
       #startButton.start {
-        background-color: #28a745; /* Green */
+        background: var(--success);
       }
       #startButton.stop {
-        background-color: #dc3545; /* Red */
-      }
-      label {
-        font-weight: bold;
-      }
-      select {
-        padding: 8px;
-        border-radius: 4px;
-        border: 1px solid #ccc;
+        background: var(--danger);
       }
       .hidden {
         display: none;
       }
+      /* Right-align all text elements */
+      *:not(input):not(textarea) {
+        direction: rtl;
+      }
+      textarea, select, input {
+        direction: rtl;
+      }
+      /* Responsive */
+      @media (max-width: 800px) {
+        .container {
+          max-width: 98vw;
+        }
+        #videoContainer {
+          max-width: 98vw;
+        }
+        textarea {
+          min-width: 0;
+          max-width: 98vw;
+        }
+      }
+      @media (max-width: 600px) {
+        .io-areas, .controls {
+          padding: 12px 6px;
+        }
+        h1 {
+          font-size: 1.3rem;
+        }
+      }
     </style>
   </head>
   <body>
-    <h1>Camera Interaction App</h1>
-
-    <div id="videoContainer">
-      <video id="videoFeed" autoplay playsinline></video>
-      <div id="loadingOverlay">Loading...</div>
-    </div>
-    <canvas id="canvas" class="hidden"></canvas>
-    <!-- For capturing frames -->
-
-    <div class="io-areas">
-      <div>
-        <label for="instructionText">Instruction:</label><br />
-        <textarea
-          id="instructionText"
-          style="height: 2em; width: 40em"
-          name="Instruction"
-        ></textarea>
+    <div class="container">
+      <h1>مدل زبانی-بصری فارسی</h1>
+      <div id="videoContainer">
+        <video id="videoFeed" autoplay playsinline></video>
+        <div id="loadingOverlay">در حال بارگذاری...</div>
       </div>
-      <div>
-        <label for="responseText">Response:</label><br />
-        <textarea
-          id="responseText"
-          style="height: 2em; width: 40em"
-          name="Response"
-          readonly
-          placeholder="Server response will appear here..."
-        ></textarea>
+      <canvas id="canvas" class="hidden"></canvas>
+      <div class="io-areas">
+        <!-- <div>
+          <label for="instructionText">دستورالعمل:</label>
+          <textarea
+            id="instructionText"
+            name="Instruction"
+            placeholder="دستورالعمل خود را وارد کنید..."
+          ></textarea>
+        </div> -->
+        <div>
+          <label for="responseText">پاسخ:</label>
+          <textarea
+            id="responseText"
+            name="Response"
+            readonly
+            placeholder="پاسخ سرور اینجا نمایش داده می‌شود..."
+            rows="4"
+            cols="50"
+          ></textarea>
+        </div>
+      </div>
+      <div class="controls">
+        <label for="intervalSelect">فاصله بین دو درخواست:</label>
+        <select id="intervalSelect" name="Interval between 2 requests">
+          <option value="0" selected>۰ میلی‌ثانیه</option>
+          <option value="100">۱۰۰ میلی‌ثانیه</option>
+          <option value="250">۲۵۰ میلی‌ثانیه</option>
+          <option value="500">۵۰۰ میلی‌ثانیه</option>
+          <option value="1000">۱ ثانیه</option>
+          <option value="2000">۲ ثانیه</option>
+        </select>
+        <button id="startButton" class="start">شروع</button>
       </div>
     </div>
-
-    <div class="controls">
-      <label for="intervalSelect">Interval between 2 requests:</label>
-      <select id="intervalSelect" name="Interval between 2 requests">
-        <option value="0" selected>0ms</option>
-        <option value="100">100ms</option>
-        <option value="250">250ms</option>
-        <option value="500">500ms</option>
-        <option value="1000">1s</option>
-        <option value="2000">2s</option>
-      </select>
-      <button id="startButton" class="start">Start</button>
-    </div>
-
     <script type="module">
         import {
             AutoProcessor,
@@ -158,13 +275,13 @@
 
         const video = document.getElementById("videoFeed");
         const canvas = document.getElementById("canvas");
-        const instructionText = document.getElementById("instructionText");
+        // const instructionText = document.getElementById("instructionText");
         const responseText = document.getElementById("responseText");
         const intervalSelect = document.getElementById("intervalSelect");
         const startButton = document.getElementById("startButton");
         const loadingOverlay = document.getElementById("loadingOverlay");
 
-        instructionText.value = "What do you see?"; // default instruction
+        // instructionText.value = "What do you see?"; // default instruction (Persian)
         const CONTEXT = `
         Translate the text into persian and only return the translated text without any other text.
         `
@@ -295,7 +412,7 @@
 
         async function sendData() {
             if (!isProcessing) return;
-            const instruction = instructionText.value;
+            const instruction = "What do you see?";
             const rawImg = captureImage();
             if (!rawImg) {
                 responseText.value = "Capture failed";
@@ -328,18 +445,18 @@
             return;
             }
             isProcessing = true;
-            startButton.textContent = "Stop";
+            startButton.textContent = "توقف";
             startButton.classList.replace("start", "stop");
-            instructionText.disabled = true;
+            // instructionText.disabled = true;
             intervalSelect.disabled = true;
             responseText.value = "Processing started...";
             processingLoop();
         }
         function handleStop() {
             isProcessing = false;
-            startButton.textContent = "Start";
+            startButton.textContent = "شروع";
             startButton.classList.replace("stop", "start");
-            instructionText.disabled = false;
+            // instructionText.disabled = false;
             intervalSelect.disabled = false;
             if (responseText.value.startsWith("Processing started...")) {
             responseText.value = "Processing stopped.";
@@ -368,6 +485,10 @@
             }
             await initModel();
             await initCamera();
+            // Set placeholders and button text to Persian on load
+            // instructionText.placeholder = "دستورالعمل خود را وارد کنید...";
+            responseText.placeholder = "پاسخ سرور اینجا نمایش داده می‌شود...";
+            startButton.textContent = isProcessing ? "توقف" : "شروع";
         });
         window.addEventListener("beforeunload", () => {
             if (stream) {