diff --git a/Dockerfile b/Dockerfile index c051883..b874dc6 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,13 +1,19 @@ # Stage 1: Hugo bauen FROM klakegg/hugo:alpine AS builder -# WICHTIG: Kopiere das gesamte Verzeichnis, nicht nur den Inhalt +# Kopiere das gesamte Verzeichnis COPY . /src # Bauen der Seite RUN hugo # Stage 2: Nginx ausliefern FROM nginx:alpine -# Kopieren der generierten Seite + +# 1. Nginx Konfigurationsdatei kopieren (wichtig für Reverse Proxy) +#COPY nginx.conf /etc/nginx/conf.d/default.conf +COPY default.conf.template /etc/nginx/conf.d/default.conf.template + +# 2. Kopieren der generierten Seite COPY --from=builder /src/public /usr/share/nginx/html + # Nginx läuft auf Port 80 EXPOSE 80 \ No newline at end of file diff --git a/compose.yml b/compose.yml index 032d994..8c4841f 100644 --- a/compose.yml +++ b/compose.yml @@ -7,10 +7,13 @@ services: HUGO_BASEURL: https://${DOMAIN_MAIN}/ # Nimmt den Wert aus deiner .env container_name: webpage restart: unless-stopped - #environment: + command: /bin/sh -c "envsubst '\$$TOKEN' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'" + #command: /bin/sh -c "envsubst < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'" + environment: + - TOKEN=${OPEN_WEBUI_TOKEN} # - TITLE=${TITLE} # - DOMAIN_MAIN=${DOMAIN_MAIN} - #- NGINX_ENVSUBST_OUTPUT_DIR=/usr/share/nginx/html + # - NGINX_ENVSUBST_OUTPUT_DIR=/usr/share/nginx/html #volumes: # - ./html/index.html:/usr/share/nginx/html/index.html:ro # - ./html/style.css:/usr/share/nginx/html/style.css:ro diff --git a/config.toml b/config.toml index 28ca915..885ddae 100644 --- a/config.toml +++ b/config.toml @@ -1,7 +1,7 @@ baseURL = "/" languageCode = "de" defaultContentLanguage = "de" -defaultContentLanguageInSubdir = true +defaultContentLanguageInSubdir = false [languages] [languages.de] diff --git a/content/de/chat.md b/content/de/chat.md new file mode 100644 index 0000000..169fd5d --- /dev/null +++ b/content/de/chat.md @@ -0,0 +1,8 @@ +--- +title: "AI Demo Lab" +flag: "🇩🇪" +welcome_message: "Hallo! Ich bin die Demo-KI von Ground Zero Lab. Wie kann ich dir helfen?" +placeholder: "Nachricht eingeben..." +sent_btn: Senden +layout: "chat" +--- \ No newline at end of file diff --git a/content/en/chat.md b/content/en/chat.md new file mode 100644 index 0000000..7653154 --- /dev/null +++ b/content/en/chat.md @@ -0,0 +1,8 @@ +--- +title: "AI Demo Lab" +flag: "🇬🇧" +welcome_message: "Hello! I am the demo AI from Ground Zero Lab. How can I help you?" +placeholder: "Enter message..." +sent_btn: Send +layout: "chat" +--- \ No newline at end of file diff --git a/content/es/chat.md b/content/es/chat.md new file mode 100644 index 0000000..73a9a5d --- /dev/null +++ b/content/es/chat.md @@ -0,0 +1,8 @@ +--- +title: "AI Demo Lab" +flag: "🇪🇸" +welcome_message: "Здравствуйте! Я демонстрационный ИИ Ground Zero Lab. Чем могу помочь?" +placeholder: "Введите сообщение..." +sent_btn: Отправить +layout: "chat" +--- \ No newline at end of file diff --git a/content/fr/chat.md b/content/fr/chat.md new file mode 100644 index 0000000..e3c5d23 --- /dev/null +++ b/content/fr/chat.md @@ -0,0 +1,8 @@ +--- +title: "AI Demo Lab" +flag: "🇫🇷" +welcome_message: "Bonjour ! Je suis l'IA de démonstration de Ground Zero Lab. Comment puis-je vous aider ?" +placeholder: "Entrez un message..." +sent_btn: Envoyer +layout: "chat" +--- \ No newline at end of file diff --git a/content/ru/chat.md b/content/ru/chat.md new file mode 100644 index 0000000..dd88517 --- /dev/null +++ b/content/ru/chat.md @@ -0,0 +1,8 @@ +--- +title: "AI Demo Lab" +flag: "🇷🇺" +welcome_message: "Здравствуйте! Я демонстрационный ИИ Ground Zero Lab. Чем могу помочь?" +placeholder: "Введите сообщение..." +sent_btn: Отправить +layout: "chat" +--- \ No newline at end of file diff --git a/default.conf.template b/default.conf.template new file mode 100644 index 0000000..9c4576e --- /dev/null +++ b/default.conf.template @@ -0,0 +1,44 @@ +server { + listen 80; + server_name localhost; + + root /usr/share/nginx/html; + index index.html; + + # 1. Deine statischen Hugo-Dateien + location / { + try_files $uri $uri/ =404; + } + + # 2. Der API-Proxy (für den Button-Klick) + location /api/ { + proxy_pass http://open-webui:8080/api/; + proxy_set_header Host $host; + proxy_set_header Authorization "Bearer ${TOKEN}"; + } + + # 3. Der Chat-Proxy (für das Iframe) + location /c/ { + proxy_pass http://open-webui:8080/c/; + proxy_set_header Host $host; + proxy_set_header Authorization "Bearer ${TOKEN}"; + # Wichtig, damit das Iframe nicht blockiert wird + proxy_hide_header X-Frame-Options; + proxy_hide_header Content-Security-Policy; + } + + # 4. DIE NEUEN PFADE (Damit das Design/Layout lädt) + location /_app/ { + proxy_pass http://open-webui:8080/_app/; + proxy_set_header Host $host; + } + location /assets/ { + proxy_pass http://open-webui:8080/assets/; + proxy_set_header Host $host; + } + location /static/ { + proxy_pass http://open-webui:8080/static/; + proxy_set_header Host $host; + } +} + diff --git a/layouts/_default/chat.html b/layouts/_default/chat.html new file mode 100644 index 0000000..4f78149 --- /dev/null +++ b/layouts/_default/chat.html @@ -0,0 +1,108 @@ + + + + + + + Demo Chat | {{ .Title }} + + + + +
+ +
+ +
+
+
{{ .Params.welcome_message }}
+
+ +
+ + +
+
+ + + + + \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index d57c3ce..370cf99 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -105,7 +105,7 @@

{{ .Params.demo_text }}

- 🚧 {{ .Params.demo_btn1 }} + 🚧 {{ .Params.demo_btn2 }} 🚧 {{ .Params.demo_btn3 }}
diff --git a/static/script.js b/static/script.js index f40790b..83889ea 100644 --- a/static/script.js +++ b/static/script.js @@ -119,3 +119,44 @@ function applyTheme(theme) { } } +async function startDemoChat() { + try { + const response = await fetch('/api/v1/chats/new', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + // WICHTIG: Wenn dein Nginx den Token nicht setzt, + // muss er hier hin: 'Authorization': 'Bearer DEIN_TOKEN' + }, + body: JSON.stringify({ + "title": "Demo Chat", + "chat": { "model": "arcee-ai/trinity-large-preview:free"} + }) + }); + + if (!response.ok) { + const errorData = await response.json(); + console.error('API Fehlerdetails:', errorData); + throw new Error(`Fehler: ${response.status}`); + } + + const data = await response.json(); + const sessionId = data.id; + + // --- DER KORREKTE DYNAMISCHE PFAD --- + + // 1. Hole den aktuellen Sprachpfad (z.B. "/de/", "/en/") + // split('/') macht aus "/de/about/" -> ["", "de", "about", ""] + const pathSegments = window.location.pathname.split('/'); + const lang = pathSegments[1] || 'de'; // Fallback auf "de", falls kein Pfad da ist + + // 2. Leite auf den Pfad MIT Sprache und Session-ID um + // Das ergibt dann z.B. /de/chat/?session=... + window.location.href = `/${lang}/chat/?session=${sessionId}`; + //window.location.href = `/de/chat/?session=${sessionId}`; + + } catch (error) { + console.error('Fehler beim Starten:', error); + alert('Demo-Chat konnte nicht gestartet werden.'); + } +} diff --git a/static/style.css b/static/style.css index eb143a8..b4855d2 100644 --- a/static/style.css +++ b/static/style.css @@ -258,23 +258,54 @@ nav { } /* ========================================== - 4. BUTTONS + 4. BUTTONS & INPUTS (Neu gestylt) ========================================== */ -.cta-button { - display: inline-block; - background-color: var(--accent); - color: var(--accent-text); - padding: 1rem 2rem; - text-decoration: none; + +/* Basis Styling für alle Buttons (CTA, Demo, Send) */ +.cta-button, +.send-btn, +.demo-button, +.demo-buttons button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.8rem 1.8rem; border-radius: 50px; - font-weight: bold; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); - transition: all 0.3s ease; + text-decoration: none; + font-weight: 600; + font-size: 0.95rem; + transition: all 0.2s ease; + cursor: pointer; + border: none; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } -.cta-button:hover { - transform: translateY(-2px); +/* Haupt-Buttons (Akzentfarbe) */ +.cta-button, +.send-btn, +.demo-buttons button { + background-color: var(--accent); + color: var(--accent-text); +} + +.cta-button:hover, +.send-btn:hover, +.demo-buttons button:hover { background-color: var(--accent-dark); + transform: translateY(-2px); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); +} + +/* Sekundär-Buttons (Grau/Alt) */ +.demo-button { + background-color: var(--bg-section-alt); + color: var(--text-main); + border: 1px solid var(--border-color); +} + +.demo-button:hover { + background-color: var(--border-color); + transform: translateY(-2px); } .demo-buttons { @@ -286,18 +317,22 @@ nav { margin-top: 2rem; } -.demo-button { - background-color: var(--accent); - color: var(--accent-text); - padding: 0.6rem 1.4rem; - text-decoration: none; - border-radius: 25px; - transition: all 0.3s ease; +/* Eingabefeld (Chat) */ +#user-input { + flex: 1; + padding: 12px 16px; + border: 1px solid var(--border-input); + border-radius: 8px; + background: var(--bg-input); + color: var(--text-input); + font-size: 1rem; + transition: all 0.2s ease; } -.demo-button:hover { - background-color: var(--accent-dark); - transform: translateY(-2px); +#user-input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); } /* ========================================== @@ -308,7 +343,7 @@ section { background-color: var(--bg-body); } -.section-dark { +.section-dark .chat-input-area{ background-color: var(--bg-section-alt); } @@ -371,6 +406,60 @@ h2 { } +/* Chat-Container Hintergrund korrigiert */ +.chat-container { + max-width: 800px; + margin: 100px auto 20px; + display: flex; + flex-direction: column; + height: calc(100vh - 140px); + background: var(--card-bg); /* Nutzt Card Background Variable */ + border-radius: 12px; + box-shadow: 0 10px 25px var(--card-shadow); + border: 1px solid var(--border-color); + overflow: hidden; +} + +#chat-messages { + flex: 1; + overflow-y: auto; + padding: 20px; + display: flex; + flex-direction: column; + gap: 15px; +} + +.message { + max-width: 80%; + padding: 12px 16px; + border-radius: 15px; + line-height: 1.5; + font-size: 0.95rem; +} + +.user-message { + align-self: flex-end; + background-color: var(--accent); + color: var(--accent-text); + border-bottom-right-radius: 5px; +} + +.ai-message { + align-self: flex-start; + background-color: var(--bg-section-alt); + color: var(--text-main); + border-bottom-left-radius: 5px; +} + +.chat-input-area { + padding: 20px; + background-color: var(--card-bg); + border-top: 1px solid var(--border-color); + display: flex; + gap: 10px; + align-items: center; +} + /* ========================================== 6. FOOTER ========================================== */