diff --git a/demo/webui/index.css b/demo/webui/index.css index ba6f2b7..fb72baa 100644 --- a/demo/webui/index.css +++ b/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 */ -} +} \ No newline at end of file diff --git a/demo/webui/start_docker_environment.sh b/demo/webui/start_docker_environment.sh new file mode 100644 index 0000000..58b5103 --- /dev/null +++ b/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