feat: add generation mode toggle, advanced sampling parameters, and a help modal to the UI

index.html

@@ -224,19 +224,28 @@
                 <span class="text-sm font-medium text-white/70">Streaming</span>
                 <div id="streaming-toggle" class="toggle-switch active"></div>
             </div>
+            
             <div class="space-y-3">
-                <div class="flex justify-between text-xs font-bold text-white/40 uppercase tracking-widest">
-                    <span>Temperature</span>
-                    <span id="temp-val">0.7</span>
+                <span class="text-xs font-bold text-white/40 uppercase tracking-widest">Generation Mode</span>
+                <div class="flex gap-2 p-1 bg-white/5 rounded-xl border border-white/10">
+                    <button id="mode-sampling" class="flex-1 py-2 text-xs font-bold rounded-lg bg-white/10 text-white transition-all">Sampling</button>
+                    <button id="mode-beam" class="flex-1 py-2 text-xs font-bold rounded-lg text-white/40 hover:text-white transition-all">Beam Search</button>
                 </div>
-                <input type="range" id="temp-slider" min="0" max="2" step="0.01" value="0.7" class="control-slider">
             </div>
+
             <div class="space-y-3">
                 <div class="flex justify-between text-xs font-bold text-white/40 uppercase tracking-widest">
                     <span>Max Tokens</span>
-                    <span id="tokens-val">1024</span>
+                    <span id="tokens-val">2048</span>
+                </div>
+                <input type="range" id="tokens-slider" min="64" max="16384" step="64" value="2048" class="control-slider">
+            </div>
+            <div class="space-y-3">
+                <div class="flex justify-between text-xs font-bold text-white/40 uppercase tracking-widest">
+                    <span>Temperature</span>
+                    <span id="temp-val">0.7</span>
                 </div>
-                <input type="range" id="tokens-slider" min="64" max="4096" step="64" value="1024" class="control-slider">
+                <input type="range" id="temp-slider" min="0" max="2" step="0.01" value="0.7" class="control-slider">
             </div>
             <div class="space-y-3">
                 <div class="flex justify-between text-xs font-bold text-white/40 uppercase tracking-widest">
@@ -245,20 +254,60 @@
                 </div>
                 <input type="range" id="p-slider" min="0" max="1" step="0.05" value="0.8" class="control-slider">
             </div>
-
-            <button onclick="window.addFewShot()" class="w-full py-4 rounded-2xl bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-sm font-bold hover:bg-indigo-500/20 transition-all flex items-center justify-center gap-2 mb-2">
-                <i data-lucide="plus-circle" class="w-4 h-4"></i>
-                Add Few-Shot Example
-            </button>
+            <div class="space-y-3">
+                <div class="flex justify-between text-xs font-bold text-white/40 uppercase tracking-widest">
+                    <span>Top-K</span>
+                    <span id="k-val">100</span>
+                </div>
+                <input type="range" id="k-slider" min="0" max="200" step="1" value="100" class="control-slider">
+            </div>
+            <div class="space-y-3">
+                <div class="flex justify-between text-xs font-bold text-white/40 uppercase tracking-widest">
+                    <span>Max Frames</span>
+                    <span id="frames-val">64</span>
+                </div>
+                <input type="range" id="frames-slider" min="8" max="256" step="8" value="64" class="control-slider">
+            </div>
 
             <button onclick="clearHistory()" class="w-full py-4 rounded-2xl bg-red-500/10 border border-red-500/20 text-red-500 text-sm font-bold hover:bg-red-500/20 transition-all flex items-center justify-center gap-2">
                 <i data-lucide="trash-2" class="w-4 h-4"></i>
                 Clear Conversation
             </button>
         </div>
+    </div>
 
-        <div class="mt-auto p-4 bg-white/5 rounded-2xl border border-white/5 text-[10px] text-white/30 leading-relaxed">
-            MiniCPM-V 4.6 is a multimodal large language model with strong OCR and reasoning capabilities.
+    <!-- Help Modal -->
+    <div id="help-modal" class="fixed inset-0 z-[200] flex items-center justify-center bg-black/80 backdrop-blur-sm hidden p-6">
+        <div class="max-w-4xl w-full bg-[#0D1117] border border-white/10 rounded-[32px] overflow-hidden shadow-2xl flex flex-col max-h-[90vh]">
+            <div class="p-8 border-b border-white/10 flex items-center justify-between">
+                <h2 class="text-2xl font-bold">How to use MiniCPM-V 4.6</h2>
+                <button id="close-help" class="text-white/40 hover:text-white"><i data-lucide="x" class="w-6 h-6"></i></button>
+            </div>
+            <div class="p-8 overflow-y-auto space-y-12">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <div class="space-y-4">
+                        <div class="aspect-video bg-white/5 rounded-2xl overflow-hidden border border-white/5">
+                            <img src="http://thunlp.oss-cn-qingdao.aliyuncs.com/multi_modal/never_delete/m_bear2.gif" class="w-full h-full object-cover">
+                        </div>
+                        <h3 class="font-bold text-lg">1. Multi-Image Chat</h3>
+                        <p class="text-sm text-white/50 leading-relaxed">Upload multiple images at once. Use the "+" button to select files or drag them into the input area.</p>
+                    </div>
+                    <div class="space-y-4">
+                        <div class="aspect-video bg-white/5 rounded-2xl overflow-hidden border border-white/5">
+                            <img src="http://thunlp.oss-cn-qingdao.aliyuncs.com/multi_modal/never_delete/video2.gif" class="w-full h-full object-cover">
+                        </div>
+                        <h3 class="font-bold text-lg">2. Video Intelligence</h3>
+                        <p class="text-sm text-white/50 leading-relaxed">Upload videos for temporal reasoning. MiniCPM-V will sample frames and describe events over time.</p>
+                    </div>
+                    <div class="space-y-4">
+                        <div class="aspect-video bg-white/5 rounded-2xl overflow-hidden border border-white/5">
+                            <img src="http://thunlp.oss-cn-qingdao.aliyuncs.com/multi_modal/never_delete/fshot.gif" class="w-full h-full object-cover">
+                        </div>
+                        <h3 class="font-bold text-lg">3. Few-Shot Learning</h3>
+                        <p class="text-sm text-white/50 leading-relaxed">Provide examples to guide the model. Add turns with correct answers to teach the model a specific style.</p>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 
@@ -336,11 +385,49 @@
         const streamingToggle = document.getElementById('streaming-toggle');
         const tempSlider = document.getElementById('temp-slider');
         const tokensSlider = document.getElementById('tokens-slider');
+        const tokensVal = document.getElementById('tokens-val');
         const pSlider = document.getElementById('p-slider');
+        const pVal = document.getElementById('p-val');
+        const kSlider = document.getElementById('k-slider');
+        const kVal = document.getElementById('k-val');
+        const framesSlider = document.getElementById('frames-slider');
+        const framesVal = document.getElementById('frames-val');
+        const modeSampling = document.getElementById('mode-sampling');
+        const modeBeam = document.getElementById('mode-beam');
+        const helpModal = document.getElementById('help-modal');
+        const closeHelp = document.getElementById('close-help');
+
+        let generationMode = 'Sampling';
+
+        modeSampling.onclick = () => {
+            generationMode = 'Sampling';
+            modeSampling.classList.add('bg-white/10');
+            modeSampling.classList.remove('text-white/40');
+            modeBeam.classList.remove('bg-white/10');
+            modeBeam.classList.add('text-white/40');
+        };
+
+        modeBeam.onclick = () => {
+            generationMode = 'Beam Search';
+            modeBeam.classList.add('bg-white/10');
+            modeBeam.classList.remove('text-white/40');
+            modeSampling.classList.remove('bg-white/10');
+            modeSampling.classList.add('text-white/40');
+            // Disable streaming toggle for beam search parity
+            if (streamingToggle.classList.contains('active')) {
+                streamingToggle.click();
+            }
+        };
+
+        // Help Modal Logic
+        window.openHelp = () => helpModal.classList.remove('hidden');
+        closeHelp.onclick = () => helpModal.classList.add('hidden');
 
-        let selectedFiles = [];
-        let client = null;
-        let isSettingsOpen = false;
+        tempSlider.oninput = () => tempVal.textContent = tempSlider.value;
+        tokensSlider.oninput = () => tokensVal.textContent = tokensSlider.value;
+        pSlider.oninput = () => pVal.textContent = pSlider.value;
+        kSlider.oninput = () => kVal.textContent = kSlider.value;
+        framesSlider.oninput = () => framesVal.textContent = framesSlider.value;
         let chatHistory = [];
         let currentJob = null;
 
@@ -549,8 +636,8 @@
                     max_new_tokens: parseInt(tokensSlider.value),
                     temperature: parseFloat(tempSlider.value),
                     top_p: parseFloat(pSlider.value),
-                    top_k: 100,
-                    max_frames: 64
+                    top_k: parseInt(kSlider.value),
+                    max_frames: parseInt(framesSlider.value)
                 });
 
                 let finalAnswer = "";