Upload 4 files

app.py

@@ -0,0 +1,108 @@
+import os
+import openai
+import gradio as gr
+from llama_index import ServiceContext, StorageContext, load_index_from_storage, set_global_service_context
+from llama_index.llms import OpenAI
+from llama_index.text_splitter import TokenTextSplitter
+
+from theme import CustomTheme
+
+# create storage context
+storage_context = StorageContext.from_defaults(persist_dir="modulhandbuch")
+# load index
+index = load_index_from_storage(storage_context)
+
+llm = OpenAI(temperature=0.1, model="gpt-4-1106-preview")
+splitter =TokenTextSplitter(
+     chunk_size=1024,
+     chunk_overlap=128,
+     separator=" "
+)
+service_context = ServiceContext.from_defaults(
+     llm=llm, 
+     text_splitter=splitter
+)
+set_global_service_context(service_context)
+
+context = (
+    "Context information is below.\n"
+    "--------------\n"
+    "{context_str}\n"
+    "--------------\n"
+    "Greet the user in a friendly way.\n"
+    "Always keep the user on a first-name basis.\n"
+    "Answer always in German and in a friendly, humorous matter.\n"
+    "Keep the answers short and simple.\n"
+    "Tell the user in a friendly way that you can only answer questions about the modules and courses in the study program Informatics and Design if they have questions about other topics.\n"
+    "If the user asks a question that you cannot answer, tell them that you cannot answer the question and that they should contact the study program manager.\n"
+    "Don't be afraid to ask the user to rephrase the question if you don't understand it.\n"
+    "Don't repeat yourself.\n"
+)
+
+system_prompt =(
+    "You are a study program manager."
+)
+
+query_engine = index.as_chat_engine(
+    similarity_top_k = 5,
+    chat_mode = "context",
+    system_prompt = system_prompt,
+    context_template = context,
+    service_context = service_context,
+)
+
+default_text="Ich beantworte Fragen zum Modulhandbuch des Studiengangs Informatik und Design. Wie kann ich Dir helfen?"
+
+bot_examples = [
+    "Wer lehrt Mobile Anwendungen?",
+    "Welche Prüfungsform hat das Modul Software Engineering?",
+    "Wie viele Semesterwochenstunden hat das Modul Computational Thinking?",
+]
+
+submit_button = gr.Button(
+        value="Ask MUC.DAI",
+        elem_classes=["ask-button"],
+)
+
+def response(message, history):
+    if message == "":
+        answer = default_text
+    else:
+        answer = str(query_engine.chat(message, chat_history=query_engine.chat_history))
+    print("message", message)
+    print("answer", answer)
+    print("history", history)
+    return answer
+
+
+def main():
+    #openai.api_key="sk-..."
+    openai.api_key = os.environ["OPENAI_API_KEY"]
+
+    custom_theme = CustomTheme()
+
+    # default_text noch einbauen
+    chatbot = gr.Chatbot(
+        avatar_images=["assets/smile.png", "assets/mucdai.png"],
+        layout='bubble',
+        height=600,
+        value=[[None, default_text]]
+    )
+
+    chat_interface = gr.ChatInterface(
+        fn=response,
+        retry_btn=None,
+        undo_btn=None,
+        title="MUC.DAI Informatik und Design - frag alles was Du wissen willst!",
+        submit_btn=submit_button,
+        theme=custom_theme,
+        chatbot=chatbot,
+        css="style.css",
+        examples=bot_examples,
+    )
+
+    chat_interface.launch(inbrowser=True, debug=True)
+
+
+if __name__ == "__main__":
+    main()

requirements.txt

@@ -0,0 +1,3 @@
+gradio==4.10.0
+llama_index==0.9.16
+openai==1.5.0

style.css

@@ -0,0 +1,34 @@
+.gap.panel {
+  padding: 0 !important;
+}
+/*
+div {
+  background-image: url("https://mediapool.hm.edu/media/mucdai/keyvisuals_1/mucdai_keyvisual_16_portrait_m.jpg") !important;
+}
+*/
+
+div {
+  background-image: url("./assets/gulfer-ergin-LUGuCtvlk1Q-unsplash.jpg") !important;
+}
+
+div.gap > .stretch {
+  display: none !important;
+}
+div.gap.panel > div.gr-group {
+  position: absolute;
+  bottom: 0;
+}
+h1 {
+  font-size: 24px !important;
+}
+.ask-button {
+  background-color: var(--color-accent);
+  font-weight: bold;
+  letter-spacing: 0.1rem;
+}
+.gallery-item {
+  color: var(--block-label-text-color) !important;
+}
+div.message-wrap {
+  margin-bottom: 32px !important;
+}

theme.py

@@ -0,0 +1,63 @@
+from gradio.themes.soft import Soft
+from gradio.themes.utils import fonts
+
+
+class CustomTheme(Soft):
+
+    def __init__(self):
+        super().__init__(
+            font=fonts.GoogleFont("Roboto")
+        )
+
+        white = "#FFFFFF"
+        purple = "#571DF9"
+        red = "#FA5558"
+
+        primary = white
+        secondary = "#e6e6e6"
+        panel_color = red
+        accent = purple
+        accent_soft = "#49637a28"
+        
+        primary_dark = "#121212"
+        secondary_dark = "#242424"
+        panel_color_dark = red
+        accent_dark = purple
+        accent_soft_dark = "#101727"
+        text_color_dark = white
+
+        super().set(
+            # LIGHT MODE
+            body_background_fill=primary,
+            background_fill_secondary=primary,
+            panel_background_fill=panel_color,
+            border_color_primary=primary,
+            block_background_fill=secondary,
+            block_border_color=primary,
+            block_label_background_fill=primary,
+            input_background_fill="#DADFE6",
+            input_border_color=secondary,
+            button_secondary_background_fill=accent,
+            button_secondary_text_color=white,
+            color_accent_soft=accent_soft,
+            border_color_accent_subdued=accent,
+
+            # DARK MODE
+            body_background_fill_dark=primary_dark,
+            background_fill_secondary_dark=secondary_dark,
+            panel_background_fill_dark=secondary_dark,
+            border_color_primary_dark=primary_dark,
+            block_background_fill_dark=secondary_dark,
+            block_border_color_dark=secondary_dark,
+            block_label_background_fill_dark=primary_dark,
+            block_label_text_color_dark=text_color_dark,
+            input_background_fill_dark=panel_color_dark,
+            input_border_color_dark=secondary_dark,
+            button_primary_background_fill_dark=accent_dark,
+            button_primary_text_color_dark=primary_dark,
+            color_accent_soft_dark=accent_soft_dark,
+            border_color_accent_subdued_dark=accent_soft_dark,
+
+            block_radius="15px",
+            container_radius="32px",
+        )