Refactor chat function for improved message handling and integrate Bedrock chat model; update CSS for enhanced styling and layout

app.py

@@ -1,51 +1,68 @@
 import gradio as gr
-from bedrock_client import claude_llm
 from utils import load_users
+from bedrock_client import bedrock_llm
+from langchain.schema import SystemMessage, HumanMessage, AIMessage
+import os
 
-AUTHS = load_users('user.csv')
 
+AUTHS = os.environ.get('USERS')
 
-# somewhere near the top of app.py:
-SYSTEM_PROMPT = (
-    "Du bist DevalBot, ein konversationeller Assistent des Deutschen Evaluierungsinstituts "
-    "für Entwicklungsbewertung (DEval). DEval bietet staatlichen und zivilgesellschaftlichen "
-    "Organisationen in der Entwicklungszusammenarbeit unabhängige und wissenschaftlich fundierte "
-    "Evaluierungen. Deine Hauptsprache ist Deutsch; antworte daher standardmäßig auf Deutsch. "
-    "Du kannst zudem bei statistischen Analysen und Programmierung in Stata und R unterstützen."
-)
-
-def chat(user_message, history):
-    if not user_message.strip():
-        return
+def chat(message, history):
+    # 3a) Build Bedrock input (with system prompt + raw dict‐history)
+    system_prompt = (
+        "Du bist DevalBot, ein konversationeller Assistent des Deutschen Evaluierungsinstituts "
+        "für Entwicklungsbewertung (DEval). DEval bietet staatlichen und zivilgesellschaftlichen "
+        "Organisationen in der Entwicklungszusammenarbeit unabhängige und wissenschaftlich fundierte "
+        "Evaluierungen. Deine Hauptsprache ist Deutsch; antworte daher standardmäßig auf Deutsch. "
+        "Du kannst zudem bei statistischen Analysen und Programmierung in Stata und R unterstützen."
+    )
 
-    ui_history = history + [{"role":"user","content":user_message}]
+    # 1) start with the system prompt
+    history_langchain_format: list = [SystemMessage(content=system_prompt)]
 
-    # build a proper messages array instead of a raw prompt string
-    llm_messages = [{"role":"system","content":SYSTEM_PROMPT}] \
-                 + history \
-                 + [{"role":"user","content":user_message}]
+    # 2) replay the user/assistant turns
+    for msg in history:
+        if msg["role"] == "user":
+            history_langchain_format.append(HumanMessage(content=msg["content"]))
+        elif msg["role"] == "assistant":
+            history_langchain_format.append(AIMessage(content=msg["content"]))
 
-    full = ""
-    for token in claude_llm.stream(llm_messages):
-        full += token
-        yield [{"role":"assistant","content":full}]
+    # 3) append the new user message
+    history_langchain_format.append(HumanMessage(content=message))
 
-    ui_history.append({"role":"assistant","content":full})
-    yield ui_history
+    stream =bedrock_llm.stream(history_langchain_format)
+    full = next(stream)
+    for chunk in stream:
+         full +=chunk
+         yield full.content
 
 
 with gr.Blocks(css_paths=["static/deval.css"],theme = gr.themes.Default(primary_hue="blue", secondary_hue="yellow"),) as demo:
     # ── Logo + Header + Logout ────────────────────────────────
 
-    gr.Image(
-        value="static/logo.png",
-        show_label=False,
-        interactive=False,
-        show_download_button=False,
-        show_fullscreen_button=False,
-        elem_id="logo-primary",    # matches the CSS above
-    )
-        
+
+    with gr.Row():
+        with gr.Column(scale=1):
+                gr.Image(
+                    value="static/logo.png",
+                    height=50,
+                    show_label=False,
+                    interactive=False,
+                    show_download_button=False,
+                    show_fullscreen_button=False,
+                    elem_id="logo-primary",    # matches the CSS above
+                )
+        with gr.Column(scale=10):
+            gr.Markdown(
+                "# DEvalBot\n\n"
+                "**Hinweis:** Bitte gebe keine vertraulichen Informationen ein. "
+                "Dazu zählen u.a. sensible personenbezogene Daten, institutsinterne "
+                "Informationen oder Dokumente, unveröffentlichte Berichtsinhalte, "
+                "vertrauliche Informationen oder Dokumente externer Organisationen "
+                "sowie sensible erhobene Daten (wie etwa Interviewtranskripte).", elem_id="header-text"
+            )
+
+    #Hinweis: Bitte gebe keine vertraulichen Informationen ein. Dazu zählen u.a. sensible personenbezogene Daten, institutsinterne Informationen oder Dokumente, unveröffentlichte Berichtsinhalte, vertrauliche Informationen oder Dokumente externer Organisationen sowie sensible erhobene Daten (wie etwa Interviewtranskripte).
     #logout_btn = gr.Button("Logout", elem_id="logout-btn")
     # inject auto-reload script
     gr.HTML(

bedrock_client.py

@@ -1,38 +1,28 @@
+import os
 from anthropic import AnthropicBedrock
+from langchain_aws.chat_models import ChatBedrockConverse
 from langchain_aws.llms.bedrock import BedrockLLM
-import os
 
-def get_anthropic_client():
-    return AnthropicBedrock(
-        aws_access_key=os.environ["AWS_ACCESS_KEY_ID"],
-        aws_secret_key=os.environ["AWS_SECRET_ACCESS_KEY"],
-        aws_region=os.environ.get("AWS_DEFAULT_REGION", "eu-central-1")
-    )
 
-def claude_stream_response(messages, client):
-    stream = client.messages.create(
-        model="anthropic.claude-v2:1",
-        max_tokens=1024,
-        temperature=0.7,
-        messages=messages,
-        stream=True
-    )
+# bedrock_llm1 = BedrockLLM(
+#     aws_access_key_id     = os.environ["AWS_ACCESS_KEY_ID"],
+#     aws_secret_access_key = os.environ["AWS_SECRET_ACCESS_KEY"],
+#     region_name           = "eu-west-1",
+#     provider              = "mistral",
+#     model_id              = "mistral.mistral-large-2402-v1:0",
+#     streaming             = True,
+#     model_kwargs          = {"temperature": 0.7},
+#  )
+
+# Initialize the streaming Bedrock chat model
+bedrock_llm = ChatBedrockConverse(
+    aws_access_key_id       =os.environ.get("AWS_ACCESS_KEY_ID"),
+    aws_secret_access_key   =os.environ.get("AWS_SECRET_ACCESS_KEY"),
+    region_name             =os.environ.get("AWS_DEFAULT_REGION", "eu-west-1"),
+    provider                = "mistral",
+    model_id                =os.environ.get("MODEL_ID", "mistral.mistral-large-2402-v1:0"),  # or your preferred Bedrock model
+    temperature= 0.7)
 
-    for event in stream:
-        # Only yield parts that have actual text deltas
-        if event.type == "content_block_delta":
-            text = getattr(event.delta, "text", None)
-            if text:
-                yield text
 
 
 
-claude_llm = BedrockLLM(
-    aws_access_key_id     = os.environ["AWS_ACCESS_KEY_ID"],
-    aws_secret_access_key = os.environ["AWS_SECRET_ACCESS_KEY"],
-    region_name           = "eu-central-1",
-    provider              = "anthropic",
-    model_id              = "anthropic.claude-v2:1",
-    streaming             = True,
-    model_kwargs          = {"temperature": 0.7},
-)

static/deval.css

@@ -4,25 +4,52 @@
   --color-brand-secondary: #0D456C;
 }
 
-
-/* ── Page background ───────────────────────────── */
+/* ── Page background ────────────────────────────────────────── */
 body, .gradio-container {
-  background-color: #F2F6F8 !important;  /* your desired page bg */
+  background-color: #003C66 !important;
 }
 
-/* ── All buttons ───────────────────────────────── */
+/* ── Global button look ─────────────────────────────────────── */
 button.gr-button {
-  background-color: #0D456C !important;  /* your desired button bg */
-  color:            #F2F6F8 !important;  /* button text color */
+  background-color: #003C66 !important;
+  color:            #E7AB12 !important;
 }
-
-/* optional: hover state */
 button.gr-button:hover {
   background-color: #0056b3 !important;
 }
 
-/* ── Global button look ──────────────────────────────────────── */
-button.gr-button {
-  background-color: #0D456C !important;
-  color:            #E7AB12 !important;
+/* force the logo container to left‐align its child */
+#logo-primary {
+  display: block;          /* ensure it’s a block container */
+  text-align: left !important;
 }
+
+/* still keep your size constraints */
+#logo-primary img {
+  max-width: 80%;
+  max-height: 90%;
+  height: auto;
+  object-fit: contain;
+  margin: 2 !important;
+  
+  /* nix any auto‐margins that might center it */
+}
+
+/* ── Header Markdown styling ───────────────────────────────── */
+#header-text {
+  /* overall container */
+  font-size:   1.75rem;        /* ~23px */
+  line-height: 1.6;
+  font-weight: bold;
+  color:       #C1CDDF !important;
+}
+
+/* ensure all child text elements inherit that color */
+#header-text,
+#header-text h1,
+#header-text p,
+#header-text strong,
+#header-text b,
+#header-text em {
+  color: #C1CDDF !important;
+}