diff --git a/nvidia/multi-agent-chatbot/README.md b/nvidia/multi-agent-chatbot/README.md index 81faa1d..4db454a 100644 --- a/nvidia/multi-agent-chatbot/README.md +++ b/nvidia/multi-agent-chatbot/README.md @@ -119,8 +119,8 @@ Steps to completely remove the containers and free up resources. From the root directory of the multi-agent-chatbot project, run the following commands: ```bash -docker compose -f docker-compose.yml -d docker-compose-models.yml down -docker volume rm chatbot-spark_model-data chatbot-spark_postgres_data +docker compose -f docker-compose.yml docker-compose-models.yml down +docker volume rm chatbot-spark_postgres_data ``` ## Step 9. Next steps diff --git a/nvidia/multi-agent-chatbot/assets/README.md b/nvidia/multi-agent-chatbot/assets/README.md index 25c6e85..e3cac43 100644 --- a/nvidia/multi-agent-chatbot/assets/README.md +++ b/nvidia/multi-agent-chatbot/assets/README.md @@ -85,6 +85,19 @@ You can either provide URLs or drag and drop images. Describe this image: https://en.wikipedia.org/wiki/London_Bridge#/media/File:London_Bridge_from_St_Olaf_Stairs.jpg +## Cleanup + +Follow these steps to completely remove the containers and free up resources. + +From the root directory of the multi-agent-chatbot project, run the following commands: + +```bash +docker compose -f docker-compose.yml docker-compose-models.yml down + +docker volume rm chatbot-spark_postgres_data +``` +> **Note**: If you do not execute these commands containers, will continue to run and take up memory. + ## Customizations ### Using different models diff --git a/nvidia/multi-agent-chatbot/assets/document-ingestion.png b/nvidia/multi-agent-chatbot/assets/assets/document-ingestion.png similarity index 100% rename from nvidia/multi-agent-chatbot/assets/document-ingestion.png rename to nvidia/multi-agent-chatbot/assets/assets/document-ingestion.png diff --git a/nvidia/multi-agent-chatbot/assets/multi-agent-chatbot.png b/nvidia/multi-agent-chatbot/assets/assets/multi-agent-chatbot.png similarity index 100% rename from nvidia/multi-agent-chatbot/assets/multi-agent-chatbot.png rename to nvidia/multi-agent-chatbot/assets/assets/multi-agent-chatbot.png diff --git a/nvidia/multi-agent-chatbot/assets/system-diagram.png b/nvidia/multi-agent-chatbot/assets/assets/system-diagram.png similarity index 100% rename from nvidia/multi-agent-chatbot/assets/system-diagram.png rename to nvidia/multi-agent-chatbot/assets/assets/system-diagram.png diff --git a/nvidia/multi-agent-chatbot/assets/upload-image.png b/nvidia/multi-agent-chatbot/assets/assets/upload-image.png similarity index 100% rename from nvidia/multi-agent-chatbot/assets/upload-image.png rename to nvidia/multi-agent-chatbot/assets/assets/upload-image.png diff --git a/nvidia/multi-agent-chatbot/assets/frontend/src/components/QuerySection.tsx b/nvidia/multi-agent-chatbot/assets/frontend/src/components/QuerySection.tsx index d33ad20..3ad88cc 100644 --- a/nvidia/multi-agent-chatbot/assets/frontend/src/components/QuerySection.tsx +++ b/nvidia/multi-agent-chatbot/assets/frontend/src/components/QuerySection.tsx @@ -22,8 +22,6 @@ import remarkGfm from 'remark-gfm'; // NEW import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; // NEW import { oneDark, oneLight, Dark, Light } from "react-syntax-highlighter/dist/esm/styles/prism"; // NEW import WelcomeSection from "./WelcomeSection"; -const isDark = typeof document !== "undefined" && document.documentElement.classList.contains("dark"); - export function makeChatTheme(isDark: boolean) { const base = isDark ? oneDark : oneLight; @@ -62,10 +60,30 @@ export function makeChatTheme(isDark: boolean) { 'attr-name': { ...(base['attr-name'] || {}), color: isDark ? "#e6b450" : "#6b4f00" }, } as const; } -const theme = makeChatTheme(isDark); function CodeBlockWithCopy({ code, language }: { code: string; language: string }) { const [copied, setCopied] = useState(false); + const [isDark, setIsDark] = useState(false); + + // Listen for theme changes + useEffect(() => { + const updateTheme = () => { + const darkMode = document.documentElement.classList.contains("dark"); + setIsDark(darkMode); + }; + + // Set initial theme + updateTheme(); + + // Listen for changes to the document element's class list + const observer = new MutationObserver(updateTheme); + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ['class'] + }); + + return () => observer.disconnect(); + }, []); const handleCopy = async () => { try { @@ -123,7 +141,7 @@ function CodeBlockWithCopy({ code, language }: { code: string; language: string +
+ This is a concept demo to showcase multiple models and MCP use. It is not optimized for performance. Developers can customize and further optimize it for performance. +
+ {inferenceStats.tokensPerSecond > 0 && (
{inferenceStats.tokensPerSecond} tokens/sec diff --git a/nvidia/multi-agent-chatbot/assets/frontend/src/styles/QuerySection.module.css b/nvidia/multi-agent-chatbot/assets/frontend/src/styles/QuerySection.module.css index 35380ff..724b771 100644 --- a/nvidia/multi-agent-chatbot/assets/frontend/src/styles/QuerySection.module.css +++ b/nvidia/multi-agent-chatbot/assets/frontend/src/styles/QuerySection.module.css @@ -1031,3 +1031,19 @@ margin-bottom: 4px; } +.disclaimer { + text-align: center; + font-size: 12px; + color: #6b7280; + padding: 2px 16px; + margin: -16px auto 0 auto; + max-width: 600px; + line-height: 1.4; + opacity: 0.8; + transition: color 0.3s ease; +} + +:global(.dark) .disclaimer { + color: #9ca3af; +} + diff --git a/nvidia/multi-agent-chatbot/assets/frontend/src/styles/WelcomeSection.module.css b/nvidia/multi-agent-chatbot/assets/frontend/src/styles/WelcomeSection.module.css index 75a7f58..52d5d70 100644 --- a/nvidia/multi-agent-chatbot/assets/frontend/src/styles/WelcomeSection.module.css +++ b/nvidia/multi-agent-chatbot/assets/frontend/src/styles/WelcomeSection.module.css @@ -28,7 +28,7 @@ } .welcomeMessage { - font-size: 42px; + font-size: 28px; font-weight: 200; color: #1f2937; max-width: 800px; @@ -162,7 +162,7 @@ } .welcomeMessage { - font-size: 32px; + font-size: 24px; margin-bottom: 32px; }