Merge pull request #734 from GaiZhenbiao/ui

assets/custom.css

@@ -144,7 +144,7 @@ footer {
     display: none !important;
 }
 .apSlider {
-    background-color: var(--block-label-background-fill);
+    background-color: var(--neutral-200);
     bottom: 0;
     cursor: pointer;
     left: 0;
@@ -163,13 +163,47 @@ footer {
     content: "🌞";
 }
 input:checked + .apSlider {
-    background-color: var(--block-label-background-fill);
+    background-color: var(--primary-600);
 }
 input:checked + .apSlider::before {
     transform: translateX(23px);
     content:"🌚";
 }
 
+/* Override Slider Styles (for webkit browsers like Safari and Chrome)
+ * 好希望这份提案能早日实现 https://github.com/w3c/csswg-drafts/issues/4410
+ * 进度滑块在各个平台还是太不统一了
+ */
+input[type="range"] {
+    -webkit-appearance: none;
+    height: 4px;
+    background: var(--input-background-fill);
+    border-radius: 5px;
+    background-image: linear-gradient(var(--primary-500),var(--primary-500));
+    background-size: 0% 100%;
+    background-repeat: no-repeat;
+}
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    border: solid 0.5px #ddd;
+    background-color: white;
+    cursor: ew-resize;
+    box-shadow: var(--input-shadow);
+    transition: background-color .1s ease;
+}
+input[type="range"]::-webkit-slider-thumb:hover {
+    background: var(--neutral-50);
+}
+input[type=range]::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    box-shadow: none;
+    border: none;
+    background: transparent;
+}
+
 #submit_btn, #cancel_btn {
     height: 42px !important;
 }

assets/custom.js

@@ -29,6 +29,15 @@ var historyLoaded = false;
 var ga = document.getElementsByTagName("gradio-app");
 var targetNode = ga[0];
 var isInIframe = (window.self !== window.top);
+var language = navigator.language.slice(0,2);
+
+var forView_i18n = {
+    'zh': "仅供查看",
+    'en': "For viewing only",
+    'ja': "閲覧専用",
+    'fr': "Pour consultation seulement",
+    'es': "Solo para visualización",
+};
 
 // gradio 页面加载好了么??? 我能动你的元素了么??
 function gradioLoaded(mutations) {
@@ -82,6 +91,17 @@ function gradioLoaded(mutations) {
     }
 }
 
+function webLocale() {
+    console.log("webLocale", language);
+    if (forView_i18n.hasOwnProperty(language)) {
+        var forView = forView_i18n[language];
+        var forViewStyle = document.createElement('style');
+        forViewStyle.innerHTML = '.wrap>.history-message>:last-child::after { content: "' + forView + '"!important; }';
+        document.head.appendChild(forViewStyle);
+        console.log("added forViewStyle", forView);
+    }
+}
+
 function selectHistory() {
     user_input_ta = user_input_tb.querySelector("textarea");
     if (user_input_ta) {
@@ -276,6 +296,25 @@ function setChatbotScroll() {
     var scrollHeight = chatbotWrap.scrollHeight;
     chatbotWrap.scrollTo(0,scrollHeight)
 }
+var rangeInputs = null;
+var numberInputs = null;
+function setSlider() {
+    rangeInputs = document.querySelectorAll('input[type="range"]');
+    numberInputs = document.querySelectorAll('input[type="number"]')
+    setSliderRange();
+    rangeInputs.forEach(rangeInput => {
+        rangeInput.addEventListener('input', setSliderRange);
+    });
+    numberInputs.forEach(numberInput => {
+        numberInput.addEventListener('input', setSliderRange);
+    })
+}
+function setSliderRange() {
+    var range = document.querySelectorAll('input[type="range"]');
+    range.forEach(range => {
+        range.style.backgroundSize = (range.value - range.min) / (range.max - range.min) * 100 + '% 100%';
+    });
+}
 
 function addChuanhuButton(botElement) {
     var rawMessage = null;
@@ -455,6 +494,9 @@ var mObserver = new MutationObserver(function (mutationsList) {
                     document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
                     document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot pre').forEach(addCopyCodeButton);
                 }
+                if (node.tagName === 'INPUT' && node.getAttribute('type') === 'range') {
+                    setSlider();
+                }
             }
             for (var node of mmutation.removedNodes) {
                 if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
@@ -516,6 +558,7 @@ function loadHistoryHtml() {
         var fakeHistory = document.createElement('div');
         fakeHistory.classList.add('history-message');
         fakeHistory.innerHTML = tempDiv.innerHTML;
+        webLocale();
         chatbotWrap.insertBefore(fakeHistory, chatbotWrap.firstChild);
         // var fakeHistory = document.createElement('div');
         // fakeHistory.classList.add('history-message');

modules/presets.py

@@ -164,17 +164,18 @@ ALREADY_CONVERTED_MARK = "<!-- ALREADY CONVERTED BY PARSER. -->"
 
 small_and_beautiful_theme = gr.themes.Soft(
         primary_hue=gr.themes.Color(
-            c50="rgba(2, 193, 96, 0.1)",
-            c100="rgba(2, 193, 96, 0.2)",
-            c200="#02C160",
-            c300="rgba(2, 193, 96, 0.32)",
-            c400="rgba(2, 193, 96, 0.32)",
-            c500="rgba(2, 193, 96, 1.0)",
-            c600="rgba(2, 193, 96, 1.0)",
-            c700="rgba(2, 193, 96, 0.32)",
-            c800="rgba(2, 193, 96, 0.32)",
-            c900="#02C160",
-            c950="#02C160",
+            c50="#EBFAF2",
+            c100="#CFF3E1",
+            c200="#A8EAC8",
+            c300="#77DEA9",
+            c400="#3FD086",
+            c500="#02C160",
+            c600="#06AE56",
+            c700="#05974E",
+            c800="#057F45",
+            c900="#04673D",
+            c950="#2E5541",
+            name="small_and_beautiful",
         ),
         secondary_hue=gr.themes.Color(
             c50="#576b95",
@@ -191,8 +192,9 @@ small_and_beautiful_theme = gr.themes.Soft(
         ),
         neutral_hue=gr.themes.Color(
             name="gray",
-            c50="#f9fafb",
-            c100="#f3f4f6",
+            c50="#f6f7f8",
+            # c100="#f3f4f6",
+            c100="#F2F2F2",
             c200="#e5e7eb",
             c300="#d1d5db",
             c400="#B2B2B2",
@@ -200,25 +202,28 @@ small_and_beautiful_theme = gr.themes.Soft(
             c600="#636363",
             c700="#515151",
             c800="#393939",
-            c900="#272727",
+            # c900="#272727",
+            c900="#2B2B2B",
             c950="#171717",
         ),
         radius_size=gr.themes.sizes.radius_sm,
     ).set(
-        button_primary_background_fill="#06AE56",
-        button_primary_background_fill_dark="#06AE56",
-        button_primary_background_fill_hover="#07C863",
-        button_primary_border_color="#06AE56",
-        button_primary_border_color_dark="#06AE56",
-        button_primary_text_color="#FFFFFF",
-        button_primary_text_color_dark="#FFFFFF",
-        button_secondary_background_fill="#F2F2F2",
-        button_secondary_background_fill_dark="#2B2B2B",
-        button_secondary_text_color="#393939",
-        button_secondary_text_color_dark="#FFFFFF",
+        # button_primary_background_fill="*primary_500",
+        button_primary_background_fill_dark="*primary_600",
+        # button_primary_background_fill_hover="*primary_400",
+        # button_primary_border_color="*primary_500",
+        button_primary_border_color_dark="*primary_600",
+        button_primary_text_color="wihte",
+        button_primary_text_color_dark="white",
+        button_secondary_background_fill="*neutral_100",
+        button_secondary_background_fill_hover="*neutral_50",
+        button_secondary_background_fill_dark="*neutral_900",
+        button_secondary_text_color="*neutral_800",
+        button_secondary_text_color_dark="white",
         # background_fill_primary="#F7F7F7",
         # background_fill_primary_dark="#1F1F1F",
-        block_title_text_color="*primary_500",
-        block_title_background_fill="*primary_100",
+        # block_title_text_color="*primary_500",
+        block_title_background_fill_dark="*primary_900",
+        block_label_background_fill_dark="*primary_900",
         input_background_fill="#F6F6F6",
     )