diff --git a/samples/llm_gemma/gemma.html b/samples/llm_gemma/gemma.html index 3e4d463..62e6d46 100644 --- a/samples/llm_gemma/gemma.html +++ b/samples/llm_gemma/gemma.html @@ -37,30 +37,35 @@ -
-
+
+

LLM Inference on Web

(powered by Gemma-2B)

+
-
+
-
Models Status
+
+ Models Status +
-
-
+
+
@@ -69,7 +74,7 @@

unload

@@ -77,7 +82,7 @@

[ Model should be loaded before the inference. ]
- -
-
-
- -
- -
-
-
- -
-
-
- -
-
-
+
+
+
- - - - - - - - - - - - - - + +
+
-
+ +
+
+ +
+ + + + - -
-
+ + +
+
+
diff --git a/samples/llm_gemma/gemma.js b/samples/llm_gemma/gemma.js index 69ed92f..1de333c 100644 --- a/samples/llm_gemma/gemma.js +++ b/samples/llm_gemma/gemma.js @@ -135,6 +135,8 @@ function setUpStatus(status) { if (!promptInputSection.classList.contains("running-mode")) { promptInputSection.classList.add("running-mode"); } + + promptInputSection.querySelector("textarea").setAttribute("readonly", true); } else if (status === STATUS.DEFAULT) { promptInspireBtn.disabled = false; submitBtn.disabled = false; @@ -144,6 +146,8 @@ function setUpStatus(status) { if (promptInputSection.classList.contains("running-mode")) { promptInputSection.classList.remove("running-mode"); } + + promptInputSection.querySelector("textarea").removeAttribute("readonly"); } else if (status === STATUS.UPLOADING) { promptInspireBtn.disabled = false; submitBtn.disabled = false; @@ -153,6 +157,7 @@ function setUpStatus(status) { if (!promptInputSection.classList.contains("running-mode")) { promptInputSection.classList.add("running-mode"); } + promptInputSection.querySelector("textarea").setAttribute("readonly", true); } } diff --git a/style/tailwind.css b/style/tailwind.css index e747a06..1f0ece0 100644 --- a/style/tailwind.css +++ b/style/tailwind.css @@ -723,6 +723,10 @@ video { left: 110px; } +.left-\[120px\] { + left: 120px; +} + .left-\[125px\] { left: 125px; } @@ -751,14 +755,6 @@ video { top: 10px; } -.-top-\[30px\] { - top: -30px; -} - -.left-\[120px\] { - left: 120px; -} - .isolate { isolation: isolate; } @@ -874,10 +870,6 @@ video { margin-bottom: -0.25rem; } -.-mb-3 { - margin-bottom: -0.75rem; -} - .-mb-\[16px\] { margin-bottom: -16px; } @@ -914,10 +906,6 @@ video { margin-right: 1rem; } -.mt-1 { - margin-top: 0.25rem; -} - .mt-10 { margin-top: 2.5rem; } @@ -934,10 +922,6 @@ video { margin-top: 1.25rem; } -.mt-6 { - margin-top: 1.5rem; -} - .mt-\[16px\] { margin-top: 16px; } @@ -961,10 +945,6 @@ video { -webkit-line-clamp: none; } -.\!block { - display: block !important; -} - .block { display: block; } @@ -1086,14 +1066,14 @@ video { height: 2rem; } -.h-\[140px\] { - height: 140px; -} - .h-\[250px\] { height: 250px; } +.h-\[256px\] { + height: 256px; +} + .h-\[300px\] { height: 300px; } @@ -1110,10 +1090,6 @@ video { height: 40px; } -.h-\[480px\] { - height: 480px; -} - .h-\[50px\] { height: 50px; } @@ -1139,6 +1115,38 @@ video { height: 100vh; } +.h-\[200px\] { + height: 200px; +} + +.h-auto { + height: auto; +} + +.h-\[100px\] { + height: 100px; +} + +.h-\[72px\] { + height: 72px; +} + +.h-\[64px\] { + height: 64px; +} + +.h-\[24px\] { + height: 24px; +} + +.h-\[260px\] { + height: 260px; +} + +.h-\[245px\] { + height: 245px; +} + .max-h-\[200px\] { max-height: 200px; } @@ -1293,6 +1301,14 @@ video { width: 100vw; } +.w-3\/5 { + width: 60%; +} + +.w-\[24px\] { + width: 24px; +} + .min-w-6 { min-width: 1.5rem; } @@ -1325,10 +1341,6 @@ video { max-width: 40px; } -.max-w-\[420px\] { - max-width: 420px; -} - .max-w-\[500px\] { max-width: 500px; } @@ -2726,6 +2738,14 @@ video { padding: 1.5rem; } +.p-8 { + padding: 2rem; +} + +.p-16 { + padding: 4rem; +} + .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; @@ -3833,14 +3853,6 @@ video { left: 120px; } - .\32xl\:left-\[125px\] { - left: 125px; - } - - .\32xl\:left-\[110px\] { - left: 110px; - } - .\32xl\:left-\[130px\] { left: 130px; } @@ -3855,11 +3867,6 @@ video { margin-bottom: 1rem; } - .\32xl\:my-5 { - margin-top: 1.25rem; - margin-bottom: 1.25rem; - } - .\32xl\:my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; @@ -3906,6 +3913,10 @@ video { margin-top: 0.75rem; } + .\32xl\:mt-4 { + margin-top: 1rem; + } + .\32xl\:mt-6 { margin-top: 1.5rem; } @@ -3950,10 +3961,6 @@ video { height: 220px; } - .\32xl\:h-\[300px\] { - height: 300px; - } - .\32xl\:h-\[360px\] { height: 360px; } @@ -3966,6 +3973,26 @@ video { height: 480px; } + .\32xl\:h-\[512px\] { + height: 512px; + } + + .\32xl\:h-auto { + height: auto; + } + + .\32xl\:h-\[200px\] { + height: 200px; + } + + .\32xl\:h-\[36px\] { + height: 36px; + } + + .\32xl\:h-\[30px\] { + height: 30px; + } + .\32xl\:min-h-\[28px\] { min-height: 28px; } @@ -4006,6 +4033,14 @@ video { width: 100%; } + .\32xl\:w-\[36px\] { + width: 36px; + } + + .\32xl\:w-\[30px\] { + width: 30px; + } + .\32xl\:min-w-\[68px\] { min-width: 68px; } @@ -4068,6 +4103,10 @@ video { border-radius: 1.5rem; } + .\32xl\:p-4 { + padding: 1rem; + } + .\32xl\:px-2 { padding-left: 0.5rem; padding-right: 0.5rem;