css updates and adds docker debug script

demo/webui/index.css

@@ -1,6 +1,11 @@
+/* Apply border-box globally */
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
 /* Ensure full-screen, no scrolling */
 html, body {
-    height: 100vh;
+    height: 100%;
     width: 100vw;
     margin: 0;
     padding: 0;
@@ -13,48 +18,41 @@ html, body {
 .chat-container {
     display: flex;
     flex-direction: column;
+    align-items: center;
+    justify-content: center;
     height: 100%;
     width: 100%;
-    box-sizing: border-box;
 }
 
 /* Center chat box */
 .chat-box {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
+    height: 100%;
+    width: 40vw; /* 40% of viewport width */
     background-color: #000;
     overflow: hidden;
-    padding: 20px;
+    margin: 0 auto; /* Center horizontally */
+    padding: 20px; /* Add padding */
 }
 
 /* Response messages container */
 .responses-container {
     overflow-y: auto;
-    align-items: center;
-    width: 40%;
-    height: 100%;
-    border-radius: 1rem;
+    height: calc(100% - 120px); /* Adjust height to account for input container */
+    width: 100%;
+    border-radius: 0;
     border: 1px solid #ccc;
     background-color: #1e1e1e;
-    margin: 0 auto; /* Center horizontally */
+    margin-bottom: 10px; /* Space between responses and input */
 }
 
 /* Mobile responsiveness */
 @media (max-width: 768px) {
     .chat-box {
+        width: 100vw; /* Full width on mobile */
         padding: 10px;
     }
-
-    .responses-container {
-        width: 100vw; /* Full width */
-        max-width: none;
-        border-radius: 0;
-        border: none;
-        height: calc(100vh - 120px); /* Adjust height for input and header */
-    }
 }
 
 /* Input container */
@@ -69,7 +67,7 @@ html, body {
 /* Individual chat message */
 .chat-message {
     display: flex;
-    align-items: top;
+    align-items: flex-start; /* Align items to the top */
     margin-bottom: 5px;
     padding: 10px;
     word-wrap: break-word;
@@ -127,7 +125,7 @@ html, body {
 /* Message body */
 .message-body {
     background-color: #333;
-    color:#eee;
+    color: #eee;
     padding: 8px 12px;
     border-radius: 8px;
     word-wrap: break-word;
@@ -165,9 +163,9 @@ html, body {
     flex: 1;
     padding: 10px;
     border: 1px solid #444;
-    border-radius: 8px;
+    border-radius: 0px;
     resize: none;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     margin-right: 10px;
     background-color: #333;
     color: #fff;
@@ -179,7 +177,7 @@ html, body {
     background-color: var(--arkavo-dark-orange, red);
     color: #fff;
     border: none;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     border-radius: 8px;
     cursor: pointer;
 }
@@ -192,7 +190,7 @@ html, body {
 .combined-input {
     position: relative;
     align-items: center;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     width: 100%;
 }
 
@@ -200,7 +198,7 @@ html, body {
     flex: 1;
     padding-right: 40px;
     border: 1px solid #ccc;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     border-radius: 4px;
     padding: 8px;
 }
@@ -213,7 +211,7 @@ html, body {
     height: 100%;
     width: 40px;
     color: #333;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     background-color: #f0f0f0;
     border: 1px solid #ccc;
     border-left: none;
@@ -236,7 +234,7 @@ html, body {
     border-radius: 4px;
     max-height: 200px;
     overflow-y: auto;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     width: 100%;
     z-index: 2000;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
@@ -245,7 +243,7 @@ html, body {
 /* Dropdown item */
 .dropdown-item {
     display: flex;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     justify-content: space-between;
     align-items: center;
     padding: 8px;
@@ -265,7 +263,7 @@ html, body {
     background: none;
     border: none;
     cursor: pointer;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     color: red;
 }
 
@@ -301,4 +299,4 @@ html, body {
 * {
     scrollbar-width: thin; /* Thinner scrollbar */
     scrollbar-color: #666 #1a1a1a; /* Thumb color, Track color */
-}
+}

demo/webui/start_docker_environment.sh

@@ -0,0 +1,12 @@
+# This command will load a Bash terminal with the same installations as the Docker file
+# Useful for debugging the WebUI
+docker run -it --rm \
+  -p 8000:8000 \
+  -v huggingface:/root/.cache/huggingface \
+  -v $(pwd)/../..:/app \
+  -w /app \
+  --gpus all \
+  --name deepseek_janus \
+  -e MODEL_NAME=deepseek-ai/Janus-1.3B \
+  --entrypoint bash \
+  julianfl0w/janus:latest