Spaces:

akhaliq
/

MiniCPM-V-4.6

Running on Zero

App Files Files Community

akhaliq HF Staff commited on 10 days ago

Commit

ee98620

1 Parent(s): 802afb1

refactor: update UI styling and layout with new color palette and modern scrollable chat interface

Browse files

Files changed (1) hide show

index.html +121 -97

index.html CHANGED Viewed

@@ -3,19 +3,19 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>MiniCPM-V 4.6 | Minimalist Multimodal AI</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
     <script src="https://unpkg.com/lucide@latest"></script>
     <style>
         :root {
-            --bg: #191919;
-            --accent: #D4A27F;
-            --accent-soft: rgba(212, 162, 127, 0.1);
             --text: #FFFFFF;
-            --text-muted: #A0A0A0;
             --glass: rgba(255, 255, 255, 0.03);
-            --glass-border: rgba(255, 255, 255, 0.08);
         }
         body {
@@ -23,33 +23,47 @@
             background-color: var(--bg);
             color: var(--text);
             height: 100vh;
-            overflow: hidden;
         }
         h1, h2, h3 { font-family: 'Outfit', sans-serif; }
-        .glass {
-            background: var(--glass);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-            border: 1px solid var(--glass-border);
         }
-        .chat-container {
-            scrollbar-width: none;
-            -ms-overflow-style: none;
         }
-        .chat-container::-webkit-scrollbar { display: none; }
         .message-bubble {
-            max-width: 80%;
-            transition: transform 0.2s ease;
         }
         .user-message {
-            background-color: var(--accent);
-            color: #191919;
-            box-shadow: 0 4px 20px rgba(212, 162, 127, 0.15);
         }
         .bot-message {
@@ -57,19 +71,10 @@
             border: 1px solid var(--glass-border);
         }
-        .animate-in {
-            animation: slideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-        }
-        @keyframes slideIn {
-            from { opacity: 0; transform: translateY(15px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
         .typing-dot {
-            width: 5px;
-            height: 5px;
-            background: var(--accent);
             border-radius: 50%;
             animation: bounce 1.4s infinite ease-in-out;
         }
@@ -81,88 +86,100 @@
             40% { transform: scale(1); opacity: 1; }
         }
-        .input-wrapper {
-            background: rgba(255, 255, 255, 0.04);
             border: 1px solid var(--glass-border);
             transition: all 0.3s ease;
         }
-        .input-wrapper:focus-within {
-            border-color: var(--accent);
-            background: rgba(255, 255, 255, 0.06);
-            box-shadow: 0 0 30px rgba(212, 162, 127, 0.05);
         }
-        #user-input::placeholder { color: #666; }
-        .accent-text { color: var(--accent); }
-        .accent-bg { background-color: var(--accent); }
-        @media (max-width: 768px) {
-            .message-bubble { max-width: 90%; }
         }
     </style>
 </head>
-<body class="flex flex-col items-center">
     <!-- Minimalist Header -->
-    <header class="w-full h-20 flex items-center justify-between px-6 md:px-12 z-50">
-        <div class="flex items-center gap-3">
-            <div class="w-2 h-2 rounded-full accent-bg"></div>
-            <h1 class="text-xl font-medium tracking-tight">MiniCPM-V</h1>
         </div>
-        <div class="flex items-center gap-4 text-xs font-medium text-muted uppercase tracking-widest">
-            <span>Vision • Understanding</span>
         </div>
     </header>
-    <!-- Main Chat Area -->
-    <main class="w-full max-w-4xl flex-1 flex flex-col relative px-4 md:px-0">
-        <div id="chat-messages" class="flex-1 overflow-y-auto pt-4 pb-32 space-y-8 chat-container">
             <!-- Bot Greeting -->
-            <div class="flex gap-4 items-start animate-in">
-                <div class="bot-message p-6 rounded-3xl rounded-tl-none message-bubble">
                     <p class="text-white/90 leading-relaxed text-[15px]">
-                        Welcome. I am <span class="accent-text font-medium">MiniCPM-V 4.6</span>.
-                        Upload an image or video to explore its details with me.
                     </p>
                 </div>
             </div>
         </div>
-        <!-- Floating Input -->
-        <div class="fixed bottom-0 left-0 right-0 p-6 md:p-10 pointer-events-none">
-            <div class="max-w-3xl mx-auto pointer-events-auto">
-                <!-- Preview -->
-                <div id="preview-container" class="hidden mb-6 animate-in">
-                    <div class="relative inline-block">
-                        <img id="image-preview" src="" class="h-40 w-auto rounded-3xl border border-white/10 shadow-2xl hidden object-cover" />
-                        <video id="video-preview" class="h-40 w-auto rounded-3xl border border-white/10 shadow-2xl hidden object-cover" muted loop></video>
-                        <button id="cancel-file" class="absolute -top-3 -right-3 bg-white text-black rounded-full p-2 shadow-xl hover:bg-neutral-200 transition-colors">
-                            <i data-lucide="x" class="w-4 h-4"></i>
-                        </button>
-                    </div>
                 </div>
-                <!-- Input Box -->
-                <div class="input-wrapper rounded-[2rem] p-2 flex items-end gap-2 pr-2">
-                    <div class="flex items-center">
-                        <input type="file" id="file-input" class="hidden" accept="image/*,video/*">
-                        <button id="upload-trigger" class="p-4 text-white/40 hover:text-white transition-all">
-                            <i data-lucide="paperclip" class="w-6 h-6"></i>
-                        </button>
-                    </div>
-                    <textarea id="user-input" rows="1" placeholder="Type a message..." class="flex-1 bg-transparent border-none focus:ring-0 text-white py-4 px-2 resize-none max-h-40 scrollbar-none text-[16px] leading-relaxed" oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"></textarea>
-                    <button id="send-btn" class="w-12 h-12 accent-bg text-neutral-900 rounded-full flex items-center justify-center transition-all disabled:opacity-20 disabled:grayscale group shrink-0 mb-1">
-                        <i data-lucide="arrow-up" class="w-5 h-5 group-hover:scale-110 transition-transform" id="send-icon"></i>
-                        <i data-lucide="loader-2" class="w-5 h-5 animate-spin hidden" id="loading-icon"></i>
                     </button>
                 </div>
             </div>
         </div>
-    </main>
     <script type="module">
         import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
@@ -187,10 +204,11 @@
         async function init() {
             try {
                 client = await Client.connect(window.location.origin);
-            } catch (err) { console.error("Connection failed", err); }
         }
         init();
         uploadTrigger.onclick = () => fileInput.click();
         fileInput.onchange = (e) => {
             const file = e.target.files[0];
@@ -221,26 +239,31 @@
         function appendMessage(role, text, mediaUrl = null, mediaType = null) {
             const div = document.createElement('div');
-            div.className = `flex gap-4 items-start animate-in ${role === 'user' ? 'flex-row-reverse' : ''}`;
             let mediaHtml = '';
             if (mediaUrl) {
                 if (mediaType.startsWith('image')) {
-                    mediaHtml = `<img src="${mediaUrl}" class="max-w-xs md:max-w-sm rounded-3xl mb-4 border border-white/10" />`;
                 } else {
-                    mediaHtml = `<video src="${mediaUrl}" controls class="max-w-xs md:max-w-sm rounded-3xl mb-4 border border-white/10"></video>`;
                 }
             }
             const bubbleClass = role === 'user' ? 'user-message' : 'bot-message';
             div.innerHTML = `
-                <div class="${bubbleClass} p-6 rounded-[2rem] ${role === 'user' ? 'rounded-tr-none' : 'rounded-tl-none'} message-bubble">
                     ${mediaHtml}
-                    <p class="leading-relaxed text-[15px] whitespace-pre-wrap">${text}</p>
                 </div>
             `;
-            chatMessages.appendChild(div);
             chatMessages.scrollTo({ top: chatMessages.scrollHeight, behavior: 'smooth' });
         }
@@ -266,7 +289,7 @@
             const thinkingId = 'think-' + Date.now();
             const thinkingDiv = document.createElement('div');
             thinkingDiv.id = thinkingId;
-            thinkingDiv.className = 'flex gap-4 items-start animate-in';
             thinkingDiv.innerHTML = `
                 <div class="bot-message p-6 rounded-[2rem] rounded-tl-none message-bubble flex items-center gap-4">
                     <div class="flex gap-1.5">
@@ -274,7 +297,8 @@
                     </div>
                 </div>
             `;
-            chatMessages.appendChild(thinkingDiv);
             chatMessages.scrollTo({ top: chatMessages.scrollHeight, behavior: 'smooth' });
             try {
@@ -282,14 +306,14 @@
                 const result = await client.predict("/predict", {
                     message: content,
                     file: fileData,
-                    downsample_mode: "16x" // Hidden default for minimalist UI
                 });
                 document.getElementById(thinkingId).remove();
                 appendMessage('bot', result.data);
             } catch (err) {
                 document.getElementById(thinkingId).remove();
-                appendMessage('bot', "An error occurred. Please try again.");
             } finally {
                 sendIcon.classList.remove('hidden');
                 loadingIcon.classList.add('hidden');

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>MiniCPM-V | OpenBMB</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
     <script src="https://unpkg.com/lucide@latest"></script>
     <style>
         :root {
+            --bg: #0A0C10;
+            --blue: #3B5BFF;
+            --cyan: #27D4EA;
             --text: #FFFFFF;
+            --text-muted: #6E7681;
             --glass: rgba(255, 255, 255, 0.03);
+            --glass-border: rgba(255, 255, 255, 0.1);
         }
         body {
             background-color: var(--bg);
             color: var(--text);
             height: 100vh;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden; /* Prevent body scroll */
         }
         h1, h2, h3 { font-family: 'Outfit', sans-serif; }
+        .chat-scroll-area {
+            flex: 1;
+            overflow-y: auto;
+            padding-bottom: 120px; /* Space for floating input */
+            -webkit-overflow-scrolling: touch;
         }
+        /* Modern Scrollbar */
+        .chat-scroll-area::-webkit-scrollbar {
+            width: 5px;
+        }
+        .chat-scroll-area::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        .chat-scroll-area::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
         }
         .message-bubble {
+            max-width: 85%;
+            animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
         }
         .user-message {
+            background: linear-gradient(135deg, var(--blue), var(--cyan));
+            color: #FFFFFF;
+            box-shadow: 0 10px 30px rgba(59, 91, 255, 0.2);
         }
         .bot-message {
             border: 1px solid var(--glass-border);
         }
         .typing-dot {
+            width: 4px;
+            height: 4px;
+            background: var(--cyan);
             border-radius: 50%;
             animation: bounce 1.4s infinite ease-in-out;
         }
             40% { transform: scale(1); opacity: 1; }
         }
+        .input-pill {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
             border: 1px solid var(--glass-border);
             transition: all 0.3s ease;
         }
+        .input-pill:focus-within {
+            border-color: var(--blue);
+            box-shadow: 0 0 30px rgba(59, 91, 255, 0.1);
         }
+        .logo-glow {
+            filter: drop-shadow(0 0 10px rgba(39, 212, 234, 0.3));
+        }
+        .send-btn {
+            background: linear-gradient(135deg, var(--blue), var(--cyan));
+            transition: transform 0.2s ease, opacity 0.2s ease;
         }
+        .send-btn:active { transform: scale(0.95); }
+        #user-input::placeholder { color: #555; }
     </style>
 </head>
+<body>
     <!-- Minimalist Header -->
+    <header class="h-20 flex items-center justify-between px-6 md:px-12 shrink-0 z-50">
+        <div class="flex items-center gap-4">
+            <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/1670387859384-633fe7784b362488336bbfad.png"
+                 alt="OpenBMB" class="w-10 h-10 logo-glow">
+            <div>
+                <h1 class="text-xl font-bold tracking-tight">MiniCPM-V</h1>
+                <p class="text-[10px] text-muted uppercase tracking-[0.2em] font-medium">By OpenBMB</p>
+            </div>
         </div>
+        <div class="hidden md:flex items-center gap-2 text-[10px] font-bold text-muted uppercase tracking-widest">
+            <span class="w-1.5 h-1.5 rounded-full bg-[#27D4EA] animate-pulse"></span>
+            Vision System Online
         </div>
     </header>
+    <!-- Chat Messages Scroll Area -->
+    <main id="chat-messages" class="chat-scroll-area px-4 md:px-0">
+        <div class="max-w-3xl mx-auto space-y-8 pt-4">
             <!-- Bot Greeting -->
+            <div class="flex gap-4 items-start">
+                <div class="bot-message p-6 rounded-3xl rounded-tl-none message-bubble shadow-2xl">
                     <p class="text-white/90 leading-relaxed text-[15px]">
+                        Welcome to <span class="font-bold text-[#27D4EA]">MiniCPM-V 4.6</span>.
+                        I can analyze images and videos with high efficiency.
+                        <br><br>
+                        Drop a file below to begin.
                     </p>
                 </div>
             </div>
         </div>
+    </main>
+    <!-- Floating Input Bar -->
+    <div class="fixed bottom-0 left-0 right-0 p-6 md:p-10 pointer-events-none">
+        <div class="max-w-3xl mx-auto pointer-events-auto">
+            <!-- Media Preview -->
+            <div id="preview-container" class="hidden mb-6 animate-in">
+                <div class="relative inline-block group">
+                    <img id="image-preview" src="" class="h-36 w-auto rounded-3xl border border-white/20 shadow-2xl hidden object-cover" />
+                    <video id="video-preview" class="h-36 w-auto rounded-3xl border border-white/20 shadow-2xl hidden object-cover" muted loop></video>
+                    <button id="cancel-file" class="absolute -top-3 -right-3 bg-white text-black rounded-full p-2 shadow-xl hover:bg-neutral-200 transition-all">
+                        <i data-lucide="x" class="w-4 h-4"></i>
+                    </button>
                 </div>
+            </div>
+            <!-- Pill Input -->
+            <div class="input-pill rounded-[2.5rem] p-2 flex items-end gap-2 pr-3 shadow-2xl">
+                <div class="flex items-center">
+                    <input type="file" id="file-input" class="hidden" accept="image/*,video/*">
+                    <button id="upload-trigger" class="p-4 text-white/30 hover:text-[#27D4EA] transition-colors">
+                        <i data-lucide="paperclip" class="w-6 h-6"></i>
                     </button>
                 </div>
+                <textarea id="user-input" rows="1" placeholder="Type your message..."
+                          class="flex-1 bg-transparent border-none focus:ring-0 text-white py-4 px-1 resize-none max-h-40 scrollbar-none text-[16px] leading-relaxed"></textarea>
+                <button id="send-btn" class="send-btn w-12 h-12 text-white rounded-full flex items-center justify-center disabled:opacity-20 disabled:grayscale group shrink-0 mb-1">
+                    <i data-lucide="arrow-up" class="w-5 h-5 group-hover:scale-110 transition-transform" id="send-icon"></i>
+                    <i data-lucide="loader-2" class="w-5 h-5 animate-spin hidden" id="loading-icon"></i>
+                </button>
             </div>
         </div>
+    </div>
     <script type="module">
         import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
         async function init() {
             try {
                 client = await Client.connect(window.location.origin);
+            } catch (err) { console.error("Gradio Connection Error", err); }
         }
         init();
+        // UI Interactions
         uploadTrigger.onclick = () => fileInput.click();
         fileInput.onchange = (e) => {
             const file = e.target.files[0];
         function appendMessage(role, text, mediaUrl = null, mediaType = null) {
             const div = document.createElement('div');
+            div.className = `flex gap-4 items-start ${role === 'user' ? 'flex-row-reverse' : ''}`;
             let mediaHtml = '';
             if (mediaUrl) {
                 if (mediaType.startsWith('image')) {
+                    mediaHtml = `<img src="${mediaUrl}" class="max-w-xs md:max-w-md rounded-3xl mb-4 border border-white/10" />`;
                 } else {
+                    mediaHtml = `<video src="${mediaUrl}" controls class="max-w-xs md:max-w-md rounded-3xl mb-4 border border-white/10"></video>`;
                 }
             }
             const bubbleClass = role === 'user' ? 'user-message' : 'bot-message';
             div.innerHTML = `
+                <div class="${bubbleClass} p-6 rounded-[2rem] ${role === 'user' ? 'rounded-tr-none' : 'rounded-tl-none'} message-bubble shadow-xl">
                     ${mediaHtml}
+                    <p class="leading-relaxed text-[15px] whitespace-pre-wrap font-medium">${text}</p>
                 </div>
             `;
+            // Get the inner container
+            const container = chatMessages.querySelector('.max-w-3xl');
+            container.appendChild(div);
+            // Smooth scroll to bottom
             chatMessages.scrollTo({ top: chatMessages.scrollHeight, behavior: 'smooth' });
         }
             const thinkingId = 'think-' + Date.now();
             const thinkingDiv = document.createElement('div');
             thinkingDiv.id = thinkingId;
+            thinkingDiv.className = 'flex gap-4 items-start';
             thinkingDiv.innerHTML = `
                 <div class="bot-message p-6 rounded-[2rem] rounded-tl-none message-bubble flex items-center gap-4">
                     <div class="flex gap-1.5">
                     </div>
                 </div>
             `;
+            const container = chatMessages.querySelector('.max-w-3xl');
+            container.appendChild(thinkingDiv);
             chatMessages.scrollTo({ top: chatMessages.scrollHeight, behavior: 'smooth' });
             try {
                 const result = await client.predict("/predict", {
                     message: content,
                     file: fileData,
+                    downsample_mode: "16x"
                 });
                 document.getElementById(thinkingId).remove();
                 appendMessage('bot', result.data);
             } catch (err) {
                 document.getElementById(thinkingId).remove();
+                appendMessage('bot', "The system encountered an error. Please check your file format and try again.");
             } finally {
                 sendIcon.classList.remove('hidden');
                 loadingIcon.classList.add('hidden');