Create app.py

app.py

@@ -0,0 +1,713 @@
+import gradio as gr
+import openai
+import math
+import os
+from pypdf import PdfReader
+
+
+# ── CONFIG ───────────────────────────────────────────────────────────────────
+OPENAI_API_KEY = "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"
+#os.environ.get("OPENAI_API_KEY")
+client         = openai.OpenAI(api_key=OPENAI_API_KEY)
+
+
+EMBED_MODEL = "text-embedding-3-small"
+CHAT_MODEL  = "gpt-4o-mini"
+CHUNK_SIZE  = 100
+OVERLAP     = 40
+TOP_K       = 2
+
+
+# ── GLOBALS ──────────────────────────────────────────────────────────────────
+stored_chunks     = []
+stored_embeddings = []
+doc_name          = ""
+
+
+# ── CORE LOGIC ───────────────────────────────────────────────────────────────
+def split_chunks(text, size=CHUNK_SIZE, overlap=OVERLAP):
+   words, chunks, start = text.split(), [], 0
+   while start < len(words):
+       chunks.append(" ".join(words[start:start + size]))
+       start += size - overlap
+   return chunks
+
+
+def embed(text):
+   return client.embeddings.create(model=EMBED_MODEL, input=text).data[0].embedding
+
+
+def cosine_similarity(a, b):
+   dot   = sum(x * y for x, y in zip(a, b))
+   normA = math.sqrt(sum(x * x for x in a))
+   normB = math.sqrt(sum(x * x for x in b))
+   return dot / (normA * normB)
+
+
+def get_top_chunks(question, k=TOP_K):
+   q_vec  = embed(question)
+   scores = [(cosine_similarity(q_vec, cv), c)
+             for cv, c in zip(stored_embeddings, stored_chunks)]
+   scores.sort(reverse=True)
+   return [c for _, c in scores[:k]]
+
+
+def upload_pdf(file):
+   global stored_chunks, stored_embeddings, doc_name
+   if file is None:
+       return ("— No file selected.", gr.update(interactive=False))
+
+
+   reader    = PdfReader(file.name)
+   full_text = "".join(page.extract_text() or "" for page in reader.pages)
+   doc_name  = file.name.split("/")[-1]
+
+
+   stored_chunks     = split_chunks(full_text)
+   stored_embeddings = [embed(c) for c in stored_chunks]
+
+
+   return (
+       f"✦  {doc_name}\n→  {len(stored_chunks)} chunks indexed and ready.",
+       gr.update(interactive=True)
+   )
+
+
+def chat(question, history):
+   if not stored_chunks:
+       return history + [(question, "Please index a document in the Upload tab first.")]
+
+
+   context = "\n\n".join([f"[{i+1}] {c}" for i, c in enumerate(get_top_chunks(question))])
+   prompt  = (
+       "Answer strictly from the document text below.\n"
+       "If not found, reply: \"This information is not in the document.\"\n\n"
+       f"TEXT:\n{context}\n\nQUESTION: {question}\n\nANSWER:"
+   )
+   response = client.chat.completions.create(
+       model=CHAT_MODEL,
+       messages=[
+           {"role": "system", "content":
+               "Strict document assistant. Only use provided text. "
+               "If answer absent, say: This information is not in the document."},
+           {"role": "user", "content": prompt}
+       ]
+   )
+   return history + [(question, response.choices[0].message.content)]
+
+
+
+
+# ── CSS ───────────────────────────────────────────────────────────────────────
+css = """
+@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');
+
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+
+:root {
+   --bg:          #f4f1ec;
+   --surface:     #faf8f5;
+   --surface-2:   #f0ede7;
+   --border:      rgba(60,50,30,0.09);
+   --border-2:    rgba(60,50,30,0.15);
+   --accent:      #7c6a50;
+   --accent-light:#a8916f;
+   --accent-glow: rgba(124,106,80,0.08);
+   --green:       #4a8c62;
+   --text-1:      #1e1a14;
+   --text-2:      #6b6153;
+   --text-3:      #a89e90;
+   --font-serif:  'DM Serif Display', Georgia, serif;
+   --font-sans:   'DM Sans', sans-serif;
+   --font-mono:   'DM Mono', monospace;
+   --r:           10px;
+   --r-lg:        18px;
+   --ease:        cubic-bezier(0.4,0,0.2,1);
+   --shadow:      0 1px 4px rgba(60,50,30,0.07), 0 4px 16px rgba(60,50,30,0.04);
+}
+
+
+html, body, .gradio-container, #root {
+   font-family: var(--font-sans) !important;
+   background:  var(--bg) !important;
+   color:       var(--text-1) !important;
+}
+
+
+.gradio-container {
+   max-width: 1080px !important;
+   margin: 0 auto !important;
+   padding: 44px 28px 68px !important;
+}
+
+
+::-webkit-scrollbar { width: 3px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
+
+
+/* ── MASTHEAD ── */
+.mast {
+   display: flex;
+   align-items: flex-start;
+   justify-content: space-between;
+   padding-bottom: 26px;
+   border-bottom: 1px solid var(--border-2);
+   margin-bottom: 32px;
+}
+.mast-title {
+   font-family: var(--font-serif) !important;
+   font-size: 2.6rem;
+   font-weight: 400;
+   color: var(--text-1);
+   letter-spacing: -0.025em;
+   line-height: 1.05;
+}
+.mast-title em { font-style: italic; color: var(--accent); }
+.mast-sub {
+   font-family: var(--font-mono);
+   font-size: 0.6rem;
+   font-weight: 300;
+   color: var(--text-3);
+   letter-spacing: 0.14em;
+   text-transform: uppercase;
+   margin-top: 9px;
+}
+
+
+/* ── PORTFOLIO BADGE ── */
+.portfolio-badge {
+   display: flex;
+   flex-direction: column;
+   align-items: flex-end;
+   gap: 7px;
+}
+.badge-inner {
+   display: flex;
+   align-items: center;
+   gap: 8px;
+   background: var(--surface);
+   border: 1px solid var(--border-2);
+   border-radius: 8px;
+   padding: 9px 14px 9px 11px;
+   box-shadow: var(--shadow);
+}
+.badge-dot {
+   width: 7px;
+   height: 7px;
+   border-radius: 50%;
+   background: var(--green);
+   box-shadow: 0 0 0 2px rgba(74,140,98,0.15);
+   animation: pulse 2.4s ease-in-out infinite;
+}
+@keyframes pulse {
+   0%, 100% { opacity: 1;   box-shadow: 0 0 0 2px rgba(74,140,98,0.15); }
+   50%       { opacity: 0.5; box-shadow: 0 0 0 4px rgba(74,140,98,0.08); }
+}
+.badge-text {
+   font-family: var(--font-mono);
+   font-size: 0.65rem;
+   font-weight: 500;
+   color: var(--text-1);
+   letter-spacing: 0.04em;
+}
+.badge-sub {
+   font-family: var(--font-mono);
+   font-size: 0.56rem;
+   color: var(--text-3);
+   letter-spacing: 0.1em;
+   text-transform: uppercase;
+   margin-top: 2px;
+}
+.stack-chips { display: flex; gap: 5px; }
+.chip {
+   font-family: var(--font-mono);
+   font-size: 0.55rem;
+   color: var(--text-3);
+   background: var(--surface);
+   border: 1px solid var(--border-2);
+   border-radius: 4px;
+   padding: 3px 8px;
+   letter-spacing: 0.08em;
+   text-transform: uppercase;
+}
+
+
+/* ── TABS ── */
+.tabs > .tab-nav {
+   border-bottom: 1px solid var(--border-2) !important;
+   background: transparent !important;
+   margin-bottom: 28px !important;
+   gap: 0 !important;
+}
+.tabs > .tab-nav button {
+   font-family: var(--font-mono) !important;
+   font-size: 0.63rem !important;
+   font-weight: 500 !important;
+   letter-spacing: 0.12em !important;
+   text-transform: uppercase !important;
+   color: var(--text-3) !important;
+   background: transparent !important;
+   border: none !important;
+   border-bottom: 2px solid transparent !important;
+   padding: 10px 22px !important;
+   border-radius: 0 !important;
+   transition: color 0.2s var(--ease), border-color 0.2s var(--ease) !important;
+   margin-bottom: -1px !important;
+}
+.tabs > .tab-nav button:hover   { color: var(--text-2) !important; }
+.tabs > .tab-nav button.selected {
+   color: var(--accent) !important;
+   border-bottom-color: var(--accent) !important;
+   background: transparent !important;
+}
+
+
+/* ── PANEL ── */
+.panel {
+   background: var(--surface);
+   border: 1px solid var(--border-2);
+   border-radius: var(--r-lg);
+   padding: 28px 26px;
+   box-shadow: var(--shadow);
+}
+
+
+/* ── EYEBROW ── */
+.eyebrow {
+   font-family: var(--font-mono);
+   font-size: 0.56rem;
+   font-weight: 500;
+   letter-spacing: 0.18em;
+   text-transform: uppercase;
+   color: var(--text-3);
+   margin-bottom: 16px;
+   display: flex;
+   align-items: center;
+   gap: 10px;
+}
+.eyebrow::after {
+   content: '';
+   flex: 1;
+   height: 1px;
+   background: var(--border-2);
+}
+
+
+/* ── UPLOAD GRID ── */
+.upload-grid {
+   display: grid;
+   grid-template-columns: 1fr 1fr;
+   gap: 22px;
+   align-items: start;
+}
+.upload-right { display: flex; flex-direction: column; gap: 16px; }
+
+
+/* ── SPEC GRID ── */
+.specs {
+   display: grid;
+   grid-template-columns: 1fr 1fr;
+   gap: 7px;
+}
+.spec {
+   background: var(--bg);
+   border: 1px solid var(--border);
+   border-radius: 8px;
+   padding: 11px 13px;
+}
+.spec-k {
+   font-family: var(--font-mono);
+   font-size: 0.52rem;
+   letter-spacing: 0.12em;
+   text-transform: uppercase;
+   color: var(--text-3);
+   margin-bottom: 5px;
+}
+.spec-v {
+   font-family: var(--font-mono);
+   font-size: 0.76rem;
+   color: var(--accent);
+   font-weight: 400;
+}
+.spec.wide { grid-column: span 2; }
+
+
+/* ── ARCH BOX ── */
+.arch-box {
+   background: var(--bg);
+   border: 1px solid var(--border);
+   border-radius: 10px;
+   padding: 16px 18px;
+}
+.arch-title {
+   font-family: var(--font-mono);
+   font-size: 0.54rem;
+   letter-spacing: 0.16em;
+   text-transform: uppercase;
+   color: var(--text-3);
+   margin-bottom: 14px;
+}
+.arch-step {
+   display: flex;
+   align-items: flex-start;
+   gap: 12px;
+   margin-bottom: 11px;
+}
+.arch-step:last-child { margin-bottom: 0; }
+.arch-num {
+   font-family: var(--font-mono);
+   font-size: 0.6rem;
+   color: var(--accent-light);
+   min-width: 16px;
+   margin-top: 1px;
+   font-weight: 500;
+}
+.arch-desc {
+   font-family: var(--font-sans);
+   font-size: 0.79rem;
+   font-weight: 300;
+   color: var(--text-2);
+   line-height: 1.55;
+}
+
+
+/* ── FILE INPUT ── */
+.gr-file {
+   border: 1px dashed var(--border-2) !important;
+   border-radius: var(--r) !important;
+   background: var(--surface-2) !important;
+   transition: border-color 0.2s var(--ease), background 0.2s var(--ease) !important;
+}
+.gr-file:hover {
+   border-color: var(--accent-light) !important;
+   background: var(--accent-glow) !important;
+}
+
+
+/* ── INPUTS ── */
+textarea, input[type="text"] {
+   font-family: var(--font-sans) !important;
+   font-size: 0.88rem !important;
+   font-weight: 300 !important;
+   color: var(--text-1) !important;
+   background: var(--surface-2) !important;
+   border: 1px solid var(--border-2) !important;
+   border-radius: var(--r) !important;
+   padding: 11px 15px !important;
+   line-height: 1.65 !important;
+   transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease) !important;
+   caret-color: var(--accent) !important;
+}
+textarea:focus, input[type="text"]:focus {
+   border-color: var(--accent-light) !important;
+   box-shadow: 0 0 0 3px var(--accent-glow) !important;
+   outline: none !important;
+   background: var(--surface) !important;
+}
+textarea::placeholder, input::placeholder {
+   color: var(--text-3) !important;
+   font-weight: 300 !important;
+}
+
+
+.status-box textarea {
+   font-family: var(--font-mono) !important;
+   font-size: 0.73rem !important;
+   color: var(--text-2) !important;
+   background: var(--bg) !important;
+   border: 1px solid var(--border) !important;
+   line-height: 1.9 !important;
+}
+
+
+/* ── BUTTONS ── */
+button { font-family: var(--font-sans) !important; cursor: pointer !important; }
+
+
+button.primary {
+   background: var(--accent) !important;
+   color: #faf8f5 !important;
+   border: none !important;
+   border-radius: 7px !important;
+   padding: 10px 22px !important;
+   font-size: 0.8rem !important;
+   font-weight: 500 !important;
+   letter-spacing: 0.02em !important;
+   transition: all 0.18s var(--ease) !important;
+   box-shadow: 0 1px 3px rgba(124,106,80,0.25) !important;
+}
+button.primary:hover {
+   background: var(--accent-light) !important;
+   transform: translateY(-1px) !important;
+   box-shadow: 0 4px 14px rgba(124,106,80,0.22) !important;
+}
+button.primary:active  { transform: translateY(0) !important; box-shadow: none !important; }
+button.primary:disabled {
+   background: var(--surface-2) !important;
+   color: var(--text-3) !important;
+   box-shadow: none !important;
+   cursor: not-allowed !important;
+   transform: none !important;
+}
+
+
+button.secondary {
+   background: transparent !important;
+   color: var(--text-2) !important;
+   border: 1px solid var(--border-2) !important;
+   border-radius: 7px !important;
+   padding: 10px 18px !important;
+   font-size: 0.8rem !important;
+   font-weight: 400 !important;
+   transition: all 0.18s var(--ease) !important;
+}
+button.secondary:hover {
+   color: var(--text-1) !important;
+   border-color: var(--text-3) !important;
+   background: var(--surface-2) !important;
+}
+
+
+/* ── CHATBOT ── */
+.chatbot-wrap > div {
+   background: var(--bg) !important;
+   border: 1px solid var(--border-2) !important;
+   border-radius: var(--r) !important;
+   padding: 10px !important;
+}
+.message-wrap .user-row .message {
+   background: var(--accent) !important;
+   color: #faf8f5 !important;
+   border: none !important;
+   border-radius: 14px 14px 3px 14px !important;
+   font-size: 0.85rem !important;
+   font-weight: 300 !important;
+   line-height: 1.7 !important;
+   padding: 11px 15px !important;
+   max-width: 76% !important;
+   margin-left: auto !important;
+   box-shadow: 0 2px 8px rgba(124,106,80,0.15) !important;
+}
+.message-wrap .bot-row .message {
+   background: var(--surface) !important;
+   color: var(--text-1) !important;
+   border: 1px solid var(--border-2) !important;
+   border-radius: 14px 14px 14px 3px !important;
+   font-size: 0.85rem !important;
+   font-weight: 300 !important;
+   line-height: 1.7 !important;
+   padding: 11px 15px !important;
+   max-width: 76% !important;
+}
+
+
+/* ── LABELS ── */
+label > span, .gr-form label span {
+   font-family: var(--font-mono) !important;
+   font-size: 0.56rem !important;
+   font-weight: 500 !important;
+   letter-spacing: 0.12em !important;
+   text-transform: uppercase !important;
+   color: var(--text-3) !important;
+}
+
+
+/* ── FOOTER ── */
+.footer {
+   text-align: center;
+   margin-top: 44px;
+   padding-top: 20px;
+   border-top: 1px solid var(--border-2);
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   gap: 14px;
+}
+.footer p {
+   font-family: var(--font-mono);
+   font-size: 0.56rem;
+   color: var(--text-3);
+   letter-spacing: 0.1em;
+   text-transform: uppercase;
+}
+.footer-sep { color: var(--text-3); font-size: 0.45rem; }
+"""
+
+
+# ── UI ────────────────────────────────────────────────────────────────────────
+with gr.Blocks(css=css, title="Document Intelligence — Jason Kishore") as demo:
+
+
+   gr.HTML("""
+   <div class="mast">
+       <div>
+           <div class="mast-title">Document <em>Intelligence</em></div>
+           <div class="mast-sub">Retrieval-Augmented Generation · Semantic Search · GPT-4o Mini</div>
+       </div>
+       <div class="portfolio-badge">
+           <div class="badge-inner">
+               <div class="badge-dot"></div>
+               <div>
+                   <div class="badge-text">Jason Kishore</div>
+                   <div class="badge-sub">Portfolio Project</div>
+               </div>
+           </div>
+           <div class="stack-chips">
+               <span class="chip">Python</span>
+               <span class="chip">OpenAI</span>
+               <span class="chip">Gradio</span>
+               <span class="chip">RAG</span>
+           </div>
+       </div>
+   </div>
+   """)
+
+
+   with gr.Tabs(elem_classes=["tabs"]):
+
+
+       # ── Tab 1 · Upload ───────────────────────────────────────────────────
+       with gr.TabItem("01 · Upload & Index"):
+           with gr.Column(elem_classes=["panel"]):
+               gr.HTML('<div class="eyebrow">Document Ingestion</div>')
+               gr.HTML('<div class="upload-grid">')
+
+
+               with gr.Column():
+                   pdf_input     = gr.File(label="Upload PDF", file_types=[".pdf"])
+                   upload_btn    = gr.Button("Index Document", variant="primary")
+                   upload_status = gr.Textbox(
+                       label="Status",
+                       lines=2,
+                       interactive=False,
+                       value="— Awaiting document",
+                       elem_classes=["status-box"]
+                   )
+
+
+               with gr.Column():
+                   gr.HTML("""
+                   <div class="upload-right">
+                       <div>
+                           <div class="eyebrow">Configuration</div>
+                           <div class="specs">
+                               <div class="spec">
+                                   <div class="spec-k">Embed Model</div>
+                                   <div class="spec-v">3-small</div>
+                               </div>
+                               <div class="spec">
+                                   <div class="spec-k">Chat Model</div>
+                                   <div class="spec-v">4o-mini</div>
+                               </div>
+                               <div class="spec">
+                                   <div class="spec-k">Chunk Size</div>
+                                   <div class="spec-v">100 words</div>
+                               </div>
+                               <div class="spec">
+                                   <div class="spec-k">Overlap</div>
+                                   <div class="spec-v">40 words</div>
+                               </div>
+                               <div class="spec wide">
+                                   <div class="spec-k">Top-K Retrieval</div>
+                                   <div class="spec-v">2 chunks / query</div>
+                               </div>
+                           </div>
+                       </div>
+                       <div class="arch-box">
+                           <div class="arch-title">Pipeline</div>
+                           <div class="arch-step">
+                               <div class="arch-num">01</div>
+                               <div class="arch-desc">PDF text extracted page-by-page via pypdf</div>
+                           </div>
+                           <div class="arch-step">
+                               <div class="arch-num">02</div>
+                               <div class="arch-desc">Text split into overlapping 100-word chunks</div>
+                           </div>
+                           <div class="arch-step">
+                               <div class="arch-num">03</div>
+                               <div class="arch-desc">Each chunk embedded with text-embedding-3-small</div>
+                           </div>
+                           <div class="arch-step">
+                               <div class="arch-num">04</div>
+                               <div class="arch-desc">Query embedded → top-2 chunks by cosine similarity</div>
+                           </div>
+                           <div class="arch-step">
+                               <div class="arch-num">05</div>
+                               <div class="arch-desc">GPT-4o Mini answers strictly from retrieved context</div>
+                           </div>
+                       </div>
+                   </div>
+                   """)
+
+
+               gr.HTML('</div>')
+
+
+       # ── Tab 2 · Chat ─────────────────────────────────────────────────────
+       with gr.TabItem("02 · Chat"):
+           with gr.Column(elem_classes=["panel"]):
+               gr.HTML('<div class="eyebrow">Conversation</div>')
+
+
+               chatbot = gr.Chatbot(
+                   height=440,
+                   show_label=False,
+                   bubble_full_width=False,
+                   elem_classes=["chatbot-wrap"],
+                   placeholder=(
+                       "<div style='font-family:DM Mono,monospace;font-size:0.62rem;"
+                       "color:#a89e90;text-align:center;padding:80px 0;"
+                       "letter-spacing:0.14em;text-transform:uppercase;line-height:2.2'>"
+                       "Index a document in the Upload tab<br>to begin your session</div>"
+                   )
+               )
+
+
+               msg_box = gr.Textbox(
+                   placeholder="Ask a question about your document…",
+                   label="Query",
+                   lines=1,
+                   max_lines=5,
+               )
+
+
+               with gr.Row():
+                   send_btn  = gr.Button("Send Query", variant="primary",   size="sm")
+                   clear_btn = gr.Button("Clear",      variant="secondary", size="sm")
+
+
+   gr.HTML("""
+   <div class="footer">
+       <p>Jason Kishore · Portfolio Project</p>
+       <span class="footer-sep">◆</span>
+       <p>Gradio · OpenAI · pypdf</p>
+       <span class="footer-sep">◆</span>
+       <p>Answers grounded strictly in uploaded document</p>
+   </div>
+   """)
+
+
+   # ── Events ───────────────────────────────────────────────────────────────
+   upload_btn.click(
+       fn=upload_pdf,
+       inputs=pdf_input,
+       outputs=[upload_status, send_btn]
+   )
+   send_btn.click(
+       fn=chat, inputs=[msg_box, chatbot], outputs=chatbot
+   ).then(lambda: "", outputs=msg_box)
+
+
+   msg_box.submit(
+       fn=chat, inputs=[msg_box, chatbot], outputs=chatbot
+   ).then(lambda: "", outputs=msg_box)
+
+
+   clear_btn.click(lambda: [], outputs=chatbot)
+
+
+demo.launch()
+