Spaces:

adaptsum
/

demo

Runtime error

App Files Files Community

chansung commited on Mar 5

Commit

6db7f7f

verified ·

1 Parent(s): fccc18d

Upload folder using huggingface_hub

Browse files

Files changed (7) hide show

README.md +26 -0
standalone/front/index.html +63 -7
standalone/front/scripts/events.js +9 -0
standalone/front/scripts/main.js +2 -0
standalone/front/scripts/presets.js +47 -0
standalone/front/scripts/sessions.js +27 -1
standalone/front/styles/style.css +59 -0

README.md CHANGED Viewed

@@ -351,3 +351,29 @@ $ python main.py # or gradio main.py
 # Acknowledgments
 This is a project built during the Vertex sprints held by Google's ML Developer Programs team. We are thankful to be granted good amount of GCP credits to do this project.

 # Acknowledgments
 This is a project built during the Vertex sprints held by Google's ML Developer Programs team. We are thankful to be granted good amount of GCP credits to do this project.
+# AdaptSum
+[![Sync to Hugging Face Spaces](https://github.com/deep-diver/AdaptSum/actions/workflows/sync_to_spaces.yml/badge.svg)](https://github.com/deep-diver/AdaptSum/actions/workflows/sync_to_spaces.yml)
+AdaptSum stands for Adaptive Summarization. This project focuses on developing an LLM-powered system for dynamic summarization. Instead of generating entirely new summaries with each update, the system intelligently identifies and modifies only the necessary parts of the existing summary. This approach aims to create a more efficient and fluid summarization process within a continuous chat interaction with an LLM.
+# Instructions
+1. Install dependencies
+```shell
+$ pip install requirements.txt
+```
+2. Setup Gemini API Key
+```shell
+$ export GEMINI_API_KEY=xxxxx
+```
+> note that GEMINI API KEY should be obtained from Google AI Studio. Vertex AI is not supported at the moment (this is because Gemini SDK does not provide file uploading functionality for Vertex AI usage now).
+3. Run Gradio app
+```shell
+$ python main.py # or gradio main.py
+```
+# Acknowledgments
+This is a project built during the Vertex sprints held by Google's ML Developer Programs team. We are thankful to be granted good amount of GCP credits to do this project.

standalone/front/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Chat UI with Streaming ChatGPT API, Markdown Messages, Layout Toggle, Summary & Settings</title>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
   <!-- Include marked.js for Markdown rendering -->
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
@@ -26,6 +26,61 @@
       </div>
       <!-- <h3>Chat History</h3> -->
       <ul id="sessionList"></ul>
     </div>
     <!-- Main Chat Wrapper -->
@@ -64,7 +119,7 @@
       <div class="input-container">
         <div class="button-row">
             <button id="customBtn1">TLDR</button>
-            <button id="customBtn3" class="toggle-btn-summarize"><img src="assets/summarize.svg" alt="Icon" class="svg-icon"></button>
             <button id="customBtn2"><img src="assets/settings.svg" alt="Icon" class="svg-icon"></button>
         </div>
         <div id="fileAttachments" class="file-attachments"></div>
@@ -114,12 +169,12 @@
             <div class="settings-group">
               <select id="modelSelect" name="modelSelect">
                 <optgroup label="OpenAI">
-                  <option value="gpt-4o">gpt-4o</option>
-                  <option value="gpt-4o-mini">gpt-4o-mini</option>
                 </optgroup>
                 <optgroup label="Anthropic">
-                  <option value="claude-3.5-sonnet">claude-3.5-sonnet</option>
-                  <option value="claude-3.7-sonnet">claude-3.7-sonnet</option>
                 </optgroup>
                 <optgroup label="Google">
                   <option value="gemini-2.0-flash">Gemini 2.0 Flash</option>
@@ -133,7 +188,8 @@
                 <optgroup label="Mistral">
                   <option value="mistral-large-latest">Mistral Large</option>
                   <option value="mistral-codestral-latest">CodeStral</option>
-                  <option value="mistral-ministral-8b-latest">MiniStral 8B</option>
                 </optgroup>
               </select>
             </div>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Unimaginable Chat UI</title>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
   <!-- Include marked.js for Markdown rendering -->
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
       </div>
       <!-- <h3>Chat History</h3> -->
       <ul id="sessionList"></ul>
+      <div id="presetContainer">
+        <div class="preset-header">Model Selection Presets</div>
+        <select id="preset1" class="preset-select" title="Command + Shift + 1">
+          <optgroup label="OpenAI">
+            <option value="gpt-4o">GPT-4o</option>
+            <option value="gpt-4o-mini">GPT-4o Mini</option>
+          </optgroup>
+          <optgroup label="Anthropic">
+            <option value="claude-3.5-sonnet">Claude 3.5 Sonnet</option>
+            <option value="claude-3.7-sonnet">Claude 3.7 Sonnet</option>
+          </optgroup>
+          <optgroup label="Google">
+            <option value="gemini-2.0-flash">Gemini 2.0 Flash</option>
+            <option value="gemini-2.0-flash-lite">Gemini 2.0 Flash Lite</option>
+          </optgroup>
+          <optgroup label="Hugging Face">
+            <option value="huggingface/meta-llama/Llama-3.3-70B-Instruct">Llama 3.3 70B Instruct</option>
+            <option value="huggingface/deepseek-ai/DeepSeek-R1-Distill-Qwen-32B">DeepSeek R1 Distill Qwen 32B</option>
+            <option value="huggingface/Qwen/Qwen2.5-72B-Instruct">Qwen 2.5 72B Instruct</option>
+          </optgroup>
+          <optgroup label="Mistral">
+            <option value="mistral-large-latest">Mistral Large</option>
+            <option value="mistral-codestral-latest">CodeStral</option>
+            <option value="mistral-ministral-8b-latest">Ministral 8B</option>
+            <option value="mistral-ministral-3b-latest">Ministral 3B</option>
+          </optgroup>
+        </select>
+        <select id="preset2" class="preset-select" title="Command + Shift + 2">
+          <!-- Use the same options as above -->
+          <optgroup label="OpenAI">
+            <option value="gpt-4o">GPT-4o</option>
+            <option value="gpt-4o-mini">GPT-4o Mini</option>
+          </optgroup>
+          <optgroup label="Anthropic">
+            <option value="claude-3.5-sonnet">Claude 3.5 Sonnet</option>
+            <option value="claude-3.7-sonnet">Claude 3.7 Sonnet</option>
+          </optgroup>
+          <optgroup label="Google">
+            <option value="gemini-2.0-flash">Gemini 2.0 Flash</option>
+            <option value="gemini-2.0-flash-lite">Gemini 2.0 Flash Lite</option>
+          </optgroup>
+          <optgroup label="Hugging Face">
+            <option value="huggingface/meta-llama/Llama-3.3-70B-Instruct">Llama 3.3 70B Instruct</option>
+            <option value="huggingface/deepseek-ai/DeepSeek-R1-Distill-Qwen-32B">DeepSeek R1 Distill Qwen 32B</option>
+            <option value="huggingface/Qwen/Qwen2.5-72B-Instruct">Qwen 2.5 72B Instruct</option>
+          </optgroup>
+          <optgroup label="Mistral">
+            <option value="mistral-large-latest">Mistral Large</option>
+            <option value="mistral-codestral-latest">CodeStral</option>
+            <option value="mistral-ministral-8b-latest">Ministral 8B</option>
+            <option value="mistral-ministral-3b-latest">Ministral 3B</option>
+          </optgroup>
+        </select>
+      </div>
     </div>
     <!-- Main Chat Wrapper -->
       <div class="input-container">
         <div class="button-row">
             <button id="customBtn1">TLDR</button>
+            <button id="customBtn3" class="toggle-btn-summarize" title="Toggle summarization"><img src="assets/summarize.svg" alt="Icon" class="svg-icon"></button>
             <button id="customBtn2"><img src="assets/settings.svg" alt="Icon" class="svg-icon"></button>
         </div>
         <div id="fileAttachments" class="file-attachments"></div>
             <div class="settings-group">
               <select id="modelSelect" name="modelSelect">
                 <optgroup label="OpenAI">
+                  <option value="gpt-4o">GPT-4o</option>
+                  <option value="gpt-4o-mini">GPT-4o Mini</option>
                 </optgroup>
                 <optgroup label="Anthropic">
+                  <option value="claude-3.5-sonnet">Claude 3.5 Sonnet</option>
+                  <option value="claude-3.7-sonnet">Claude 3.7 Sonnet</option>
                 </optgroup>
                 <optgroup label="Google">
                   <option value="gemini-2.0-flash">Gemini 2.0 Flash</option>
                 <optgroup label="Mistral">
                   <option value="mistral-large-latest">Mistral Large</option>
                   <option value="mistral-codestral-latest">CodeStral</option>
+                  <option value="mistral-ministral-8b-latest">Ministral 8B</option>
+                  <option value="mistral-ministral-3b-latest">Ministral 3B</option>
                 </optgroup>
               </select>
             </div>

standalone/front/scripts/events.js CHANGED Viewed

@@ -120,6 +120,15 @@ saveSettingsBtn.addEventListener('click', () => {
   sessionSettings.model = modelSelect.value;
   console.log('Session settings saved:', sessions[currentSessionIndex].settings);
   settingsOverlay.classList.remove('active');
 });
 const editTitleBtn = document.getElementById('editTitleBtn');
 editTitleBtn.addEventListener('click', () => {

   sessionSettings.model = modelSelect.value;
   console.log('Session settings saved:', sessions[currentSessionIndex].settings);
   settingsOverlay.classList.remove('active');
+  const preset1 = document.getElementById('preset1');
+  const preset2 = document.getElementById('preset2');
+  preset1.value = "gpt-4o-mini";
+  preset2.value = "gpt-4o-mini";
+  preset2.classList.remove('active');
+  preset1.classList.remove('active');
 });
 const editTitleBtn = document.getElementById('editTitleBtn');
 editTitleBtn.addEventListener('click', () => {

standalone/front/scripts/main.js CHANGED Viewed

@@ -1,6 +1,7 @@
 // main.js
 import { initSessions, sessions, currentSessionIndex, renderCurrentSession } from './sessions.js';
 import { updateHamburgerPosition } from './navigation.js';
 // Import events so they register their listeners.
 import './events.js';
@@ -10,6 +11,7 @@ import './utils.js';
 // Initialize sessions
 initSessions();
 updateHamburgerPosition();
 // Attach sessions-related variables to the window for global access
 window.sessions = sessions;

 // main.js
 import { initSessions, sessions, currentSessionIndex, renderCurrentSession } from './sessions.js';
 import { updateHamburgerPosition } from './navigation.js';
+import { initPresets } from './presets.js';
 // Import events so they register their listeners.
 import './events.js';
 // Initialize sessions
 initSessions();
 updateHamburgerPosition();
+initPresets();
 // Attach sessions-related variables to the window for global access
 window.sessions = sessions;

standalone/front/scripts/presets.js ADDED Viewed

	@@ -0,0 +1,47 @@

+import { renderCurrentSession, sessions, currentSessionIndex } from './sessions.js';
+// presets.js
+export function initPresets() {
+    const presetContainer = document.getElementById('presetContainer');
+    if (!presetContainer) return;
+    const preset1 = document.getElementById('preset1');
+    const preset2 = document.getElementById('preset2');
+    const modelSelect = document.getElementById('modelSelect');
+    preset1.value = "gpt-4o-mini";
+    preset2.value = "gpt-4o-mini";
+    // Keyboard shortcuts: Ctrl/Cmd + Shift + 1, 2, 3
+    document.addEventListener('keydown', (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.shiftKey && !e.altKey) {
+        switch (e.key) {
+          case '1':
+            preset2.classList.remove('active');
+            preset1.classList.add('active');
+            modelSelect.value = preset1.value;
+            window.sessions[currentSessionIndex].settings.model = preset1.value;
+            break;
+          case '2':
+            preset1.classList.remove('active');
+            preset2.classList.add('active');
+            modelSelect.value = preset2.value;
+            window.sessions[currentSessionIndex].settings.model = preset2.value;
+            break;
+        }
+      }
+    });
+    preset1.addEventListener('change', () => {
+      console.log(currentSessionIndex);
+      window.sessions[currentSessionIndex].settings.model_preset1 = preset1.value;
+      console.log(window.sessions[currentSessionIndex].settings.model_preset1);
+    });
+    preset2.addEventListener('change', () => {
+      console.log(currentSessionIndex);
+      window.sessions[currentSessionIndex].settings.model_preset2 = preset2.value;
+      console.log(window.sessions[currentSessionIndex].settings.model_preset2);
+    });
+  }

standalone/front/scripts/sessions.js CHANGED Viewed

@@ -20,6 +20,8 @@ export function initSessions() {
       maxTokens: 8096,
       persona: "professional",
       model: "gpt-4o-mini",
       enableSummarization: false,
     },
   });
@@ -52,6 +54,19 @@ export function renderSessionList() {
       currentCardIndex = 0;
       renderSessionList();
       renderCurrentSession();
     });
     if (index === currentSessionIndex) li.classList.add('active');
     sessionList.appendChild(li);
@@ -212,8 +227,10 @@ document.getElementById('newSessionBtn').addEventListener('click', () => {
           maxTokens: 8096,
           persona: "professional",
           model: "gpt-4o-mini",
           enableSummarization: false
-      }
   };
   sessions.push(newSession);
@@ -224,4 +241,13 @@ document.getElementById('newSessionBtn').addEventListener('click', () => {
   renderSessionList();
   renderCurrentSession();
 });

       maxTokens: 8096,
       persona: "professional",
       model: "gpt-4o-mini",
+      model_preset1: "gpt-4o-mini",
+      model_preset2: "gpt-4o-mini",
       enableSummarization: false,
     },
   });
       currentCardIndex = 0;
       renderSessionList();
       renderCurrentSession();
+      console.log(currentSessionIndex);
+      const preset1 = document.getElementById('preset1');
+      const preset2 = document.getElementById('preset2');
+      preset1.value = sessions[currentSessionIndex].settings.model_preset1;
+      preset2.value = sessions[currentSessionIndex].settings.model_preset2;
+      console.log(preset1.value);
+      console.log(preset2.value);
+      preset2.classList.remove('active');
+      preset1.classList.remove('active');
     });
     if (index === currentSessionIndex) li.classList.add('active');
     sessionList.appendChild(li);
           maxTokens: 8096,
           persona: "professional",
           model: "gpt-4o-mini",
+          model_preset1: "gpt-4o-mini",
+          model_preset2: "gpt-4o-mini",
           enableSummarization: false
+      }
   };
   sessions.push(newSession);
   renderSessionList();
   renderCurrentSession();
+  const preset1 = document.getElementById('preset1');
+  const preset2 = document.getElementById('preset2');
+  preset1.value = "gpt-4o-mini";
+  preset2.value = "gpt-4o-mini";
+  preset2.classList.remove('active');
+  preset1.classList.remove('active');
 });

standalone/front/styles/style.css CHANGED Viewed

@@ -65,6 +65,7 @@
     display: flex;
     flex-direction: column;
   }
   .nav-bar.hidden {
     transform: translateX(-100%);
     width: 0;
@@ -993,3 +994,61 @@
 .toggle-btn-summarize.active {
   background-color: #4a90e2 !important;  /* Vivid color when active */
 }

     display: flex;
     flex-direction: column;
   }
   .nav-bar.hidden {
     transform: translateX(-100%);
     width: 0;
 .toggle-btn-summarize.active {
   background-color: #4a90e2 !important;  /* Vivid color when active */
 }
+/* Model Presets */
+/* Container for presets */
+#presetContainer {
+  flex-shrink: 0;
+  padding: 10px 24px;
+  border-top: 1px solid #ddd;
+  background-color: #fff;
+}
+/* Improved preset select styling */
+#presetContainer {
+  position: absolute;
+  bottom: 20px; /* same as nav-bar padding */
+  left: 20px;
+  right: 20px;
+  background: #fff;
+  padding: 10px;
+  border-top: 1px solid #ddd;
+}
+/* Enhanced preset select styling */
+.preset-header {
+  text-align: center;
+  margin-bottom: 10px;
+}
+.preset-select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 100%;
+  padding: 12px 16px;
+  margin-bottom: 10px;
+  font-size: 1em;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: #fafafa;
+  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+  cursor: pointer;
+}
+.preset-select.active {
+  background-color: #4a90e2;
+  color: #fff;
+  border-color: #4a90e2;
+  box-shadow: 0 0 8px rgba(74, 144, 226, 0.3);
+  outline: none;
+}
+#sessionList {
+  overflow-y: auto;
+  padding-bottom: 150px; /* Adjust this value as needed */
+}