pics

app.py

@@ -33,7 +33,7 @@ llm = Llama(
 def respond(message, history):
     # 1. Retrieve Context
     context = ask(message, retriver_moedel=retriever)
-    print(context)
+    print("----------------------    CONTEXT FOUND   --------------------",context)
     
     # 2. Define System/Contextual Prompt
     system_instruction = (
@@ -73,25 +73,121 @@ body {
     font-family: "Georgia", "Times New Roman", serif;
 }
 
-/* Main container */
-.gradio-container {
-    background: transparent !important;
-}
+/* Optional: classical-looking font for headings */
+@import url('https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap');
 
-/* Title & description */
 h1, h2, h3, .prose h1, .prose h2, .prose h3 {
+    font-family: "Cardo", "Georgia", serif;
     color: #f5f1e6 !important;
     letter-spacing: 0.08em;
     text-transform: uppercase;
 }
 
-.prose, .prose p, .dark .prose, .dark .prose p {
-    color: #e0d9c6 !important;
+/* Main container */
+.gradio-container {
+    background: transparent !important;
+}
+
+/* Hero section with pillars / image */
+.hero {
+    position: relative;
+    margin: 0 auto 1.5rem auto;
+    max-width: 900px;
+    padding: 1.8rem 1.6rem 1.6rem 1.6rem;
+    border-radius: 22px;
+    border: 1px solid rgba(196, 164, 110, 0.5);
+    background:
+        radial-gradient(circle at top, rgba(196,164,110,0.12), rgba(5,5,10,0.96)),
+        linear-gradient(135deg, rgba(10,10,18,0.9), rgba(3,3,7,0.98));
+    box-shadow:
+        0 0 30px rgba(0, 0, 0, 0.9),
+        0 0 80px rgba(84, 63, 140, 0.55);
+    overflow: hidden;
+}
+
+/* Faded pillars on each side using pseudo-elements */
+.hero::before,
+.hero::after {
+    content: "";
+    position: absolute;
+    top: -10%;
+    width: 110px;
+    height: 140%;
+    background-image: url("https://i0.wp.com/www.bookofthrees.com/wp-content/uploads/2005/02/parthenon.jpg?w=1600&ssl=1");
+    background-size: contain;
+    background-repeat: no-repeat;
+    opacity: 0.12;
+    filter: grayscale(1);
+    mix-blend-mode: screen;
+    pointer-events: none;
+}
+
+.hero::before {
+    left: -10px;
+}
+
+.hero::after {
+    right: -10px;
+    transform: scaleX(-1);
+}
+
+/* Inner hero content so text doesn’t sit under pillars */
+.hero-inner {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    gap: 1.2rem;
+    align-items: center;
+}
+
+/* Circle “medallion” with a statue/Greek image */
+.hero-image {
+    flex-shrink: 0;
+    width: 96px;
+    height: 96px;
+    border-radius: 999px;
+    overflow: hidden;
+    border: 2px solid rgba(196, 164, 110, 0.7);
+    box-shadow: 0 0 24px rgba(0, 0, 0, 0.9);
+    background: radial-gradient(circle at top, rgba(255,255,255,0.1), rgba(5,5,10,1));
+}
+
+.hero-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* Hero title + subtitle */
+.hero-text h1 {
+    margin: 0 0 0.35rem 0;
+    font-size: 1.3rem;
+    letter-spacing: 0.12em;
+}
+
+.hero-text p {
+    margin: 0;
+    font-size: 0.92rem;
+    color: #e0d9c6;
+    line-height: 1.5;
+}
+
+/* Subtle Greek key (meander) line under hero */
+.hero-keyline {
+    margin-top: 0.9rem;
+    height: 1px;
+    background-image: linear-gradient(
+        90deg,
+        rgba(196,164,110,0),
+        rgba(196,164,110,0.8),
+        rgba(196,164,110,0)
+    );
+    opacity: 0.7;
 }
 
 /* Chat box card */
 .gr-chat-interface {
-    background: rgba(5, 5, 12, 0.85) !important;
+    background: rgba(5, 5, 12, 0.88) !important;
     border-radius: 18px !important;
     border: 1px solid rgba(196, 164, 110, 0.4) !important;
     box-shadow:
@@ -163,16 +259,37 @@ button:hover, .gr-button:hover {
 """
 
 
-chat = gr.ChatInterface(
-    fn=respond,
-    title="Obsidian Oracle: Archives of Myth",
-    description=(
-        "Enter the candlelit archives of forgotten epics. "
-        "The Obsidian Oracle answers in a dark-academia tone, drawing on "
-        "the Iliad, the Odyssey, and other fragments of ancient lore."
-    ),
-    css=dark_academia_css,
-)
+with gr.Blocks(css=dark_academia_css) as demo:
+    gr.HTML(
+        """
+        <div class="hero">
+          <div class="hero-inner">
+            <div class="hero-image">
+              <img src="https://preview.redd.it/ancient-greek-marble-statue-of-in-a-toga-v0-ajlvj2xddwec1.jpg?width=640&crop=smart&auto=webp&s=9bf7b1439ea460e824e188c63633fe4bda87056f" alt="Homer">
+            </div>
+            <div class="hero-text">
+              <h1>Expert of the Iliad and the Odyssey</h1>
+              <p>
+                I am well read on Homer's most famous works – The Iliad and The Odyssey.
+                Ask me of heroes, gods, and monsters.
+              </p>
+            </div>
+          </div>
+          <div class="hero-keyline"></div>
+        </div>
+        """
+    )
+    chat = gr.ChatInterface(
+        fn=respond,
+        title="Expert of the Iliad and the Odyssey",
+        description=(
+            "I am well read on Homer's most famous works - The Iliad and The Odyssey. "
+            "Ask me about these, or other mythological questions you may have. "
+            "I am older than the trees, and the goblins that live inside them, "
+            "and even the ghouls that haunt them. Tread lightly."
+        ),
+        css=dark_academia_css,
+    )
 
 if __name__ == "__main__":
     chat.launch()

rag_db.py

@@ -34,7 +34,7 @@ def load_and_chunk():
     
     # 2. Chunk them
     splitter = RecursiveCharacterTextSplitter(
-        chunk_size=800,
+        chunk_size=1200,
         chunk_overlap=150
     )
     return splitter.split_documents(docs)