Add html, database, index files

.gitattributes

@@ -33,3 +33,8 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+cnnhealthnews2.db filter=lfs diff=lfs merge=lfs -text
+news_index_compressed/index.faiss filter=lfs diff=lfs merge=lfs -text
+relations_new.db filter=lfs diff=lfs merge=lfs -text
+triplets_index_compressed/index.faiss filter=lfs diff=lfs merge=lfs -text
+triplets_new.db filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1 @@
+.vercel

README.md

@@ -1,12 +1,2 @@
----
-title: KnowledgeRetrievalProject
-emoji: 🏃
-colorFrom: gray
-colorTo: red
-sdk: docker
-pinned: false
-license: apache-2.0
-short_description: Retrieve knowledge from Indonesian News
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Knowledge-Retrieval-Project
+This repository contains the core code for a web application that lets users explore and retrieve knowledge built from Indonesian national news sources (and potentially other sources).

backend.py

@@ -0,0 +1,596 @@
+import sqlite3
+import contextlib
+import json
+from http.server import BaseHTTPRequestHandler
+from urllib.parse import urlparse, parse_qs
+import traceback
+from pydantic import BaseModel, Field
+from typing import List, Dict, Tuple
+import os
+from langchain_community.vectorstores import FAISS
+from langchain_community.embeddings import FakeEmbeddings
+from langchain_community.vectorstores.utils import DistanceStrategy
+from together import Together
+import numpy as np
+from collections import defaultdict
+
+app = FastAPI(title="Knowledge Graph API")
+
+# Enable CORS for frontend access
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Database configuration - UPDATE THESE PATHS
+DATABASE_CONFIG = {
+    "triplets_db": "triplets_new.db",  
+    "definitions_db": "relations_new.db",
+    "news_db": "cnnhealthnews2.db",
+    "triplets_table": "triplets", 
+    "definitions_table": "relations", 
+    "head_column": "head_entity",
+    "relation_column": "relation", 
+    "tail_column": "tail_entity",
+    "definition_column": "definition",
+    "link_column": "link",
+    "title_column": "column",
+    "content_column": "content"
+}
+
+class GraphNode(BaseModel):
+    id: str
+    label: str
+    type: str = "entity"
+
+class GraphEdge(BaseModel):
+    source: str
+    target: str
+    relation: str
+    definition: Optional[str] = None
+
+class GraphData(BaseModel):
+    nodes: List[GraphNode]
+    edges: List[GraphEdge]
+
+class TripletData(BaseModel):
+    head: str
+    relation: str
+    tail: str
+
+class RelationDefinition(BaseModel):
+    relation: str
+    definition: str
+
+class RetrieveTripletsResponse(BaseModel):
+    triplets: List[TripletData]
+    relations: List[RelationDefinition]
+
+class NewsItem(BaseModel):
+    url: str
+    content: str
+    preview: str
+    title: str
+
+class QueryRequest(BaseModel):
+    query: str
+    
+class QueryResponse(BaseModel):
+    answer: str
+    triplets: List[TripletData]
+    relations: List[RelationDefinition]
+    news_items: List[NewsItem]
+    graph_data: GraphData
+    
+class ExtractedInformationNews(BaseModel):
+    extracted_information: str = Field(description="Extracted information")
+    links: list = Field(description="citation links")
+
+class ExtractedInformation(BaseModel):
+    extracted_information: str = Field(description="Extracted information")
+
+@contextlib.contextmanager
+def get_triplets_db():
+    conn = None
+    try:
+        conn = sqlite3.connect(DATABASE_CONFIG["triplets_db"])
+        yield conn
+    finally:
+        if conn:
+            conn.close()
+
+@contextlib.contextmanager
+def get_news_db():
+    conn = None
+    try:
+        conn = sqlite3.connect(DATABASE_CONFIG["news_db"])
+        yield conn
+    finally:
+        if conn:
+            conn.close()
+
+@contextlib.contextmanager
+def get_definitions_db():
+    conn = None
+    try:
+        conn = safe_connect(DATABASE_CONFIG["definitions_db"])
+        yield conn
+    finally:
+        if conn:
+            conn.close()
+
+def retrieve_triplets(query: str) -> Tuple[List[Tuple[str, str, str]], List[Tuple[str, str]]]:
+    """
+    Args:
+        query (str): User query
+        
+    Returns:
+        Tuple containing:
+        - List of triplets: [(head, relation, tail), ...]
+        - List of relations with definitions: [(relation, definition), ...]
+    """
+    API_KEY = os.environ.get("TOGETHER_API_KEY")
+    client = Together(api_key = API_KEY)
+    
+    dummy_embeddings = FakeEmbeddings(size=768)
+    triplets_store = FAISS.load_local(
+    "triplets_index_compressed", dummy_embeddings, allow_dangerous_deserialization=True
+    )
+    triplets_store.index.nprobe = 100
+    triplets_store._normalize_L2 = True
+    triplets_store.distance_strategy = DistanceStrategy.COSINE
+
+    response = client.embeddings.create(
+      model = "Alibaba-NLP/gte-modernbert-base",
+      input = query
+    )
+
+    emb = np.array(response.data[0].embedding)
+    emb = emb / np.linalg.norm(emb)
+    
+    related_head_entity = []
+    result_triplets = triplets_store.similarity_search_with_score_by_vector(emb, k=100)
+    for res, score in result_triplets:
+        if score > 0.7:
+            related_head_entity.append(res)
+            
+    try:
+        all_triplets = []
+        with get_triplets_db() as conn:
+            head_col = DATABASE_CONFIG["head_column"]
+            rel_col = DATABASE_CONFIG["relation_column"] 
+            tail_col = DATABASE_CONFIG["tail_column"]
+        
+            for head_entity in related_head_entity:
+                he = head_entity.page_content
+                cursor = conn.cursor()
+                cursor.execute("SELECT * FROM triplets WHERE head_entity = (?)", ([he]))
+                rows = cursor.fetchall()
+                triplets = [(str(row[0]), str(row[1]), str(row[2])) for row in rows]
+                all_triplets += triplets
+            
+        all_relations = []
+        relations = [relation for _, relation, _ in all_triplets]
+        with get_definitions_db() as conn:
+            rel_col = DATABASE_CONFIG["relation_column"] 
+            def_col = DATABASE_CONFIG["definition_column"]
+        
+            for rel in set(relations):
+                cursor = conn.cursor()
+                cursor.execute("SELECT * FROM relations WHERE relation = (?)", ([rel]))
+                rows = cursor.fetchall()
+                relation = [(str(row[0]), str(row[1])) for row in rows]
+                all_relations += relation
+
+        return all_triplets, all_relations
+        
+    except Exception as e:
+        print(f"Error in retrieve_triplets: {e}")
+        return [], []
+
+def retrieve_news(query: str) -> Dict[str, str]:
+    """
+    Args:
+        query (str): User query
+        
+    Returns: Tuple
+        - Related content
+        - Links of the related content
+    """
+    API_KEY = os.environ.get("TOGETHER_API_KEY")
+    client = Together(api_key = API_KEY)
+    
+    dummy_embeddings = FakeEmbeddings(size=768)
+    news_store = FAISS.load_local(
+        "news_index_compressed", dummy_embeddings, allow_dangerous_deserialization=True
+    )
+    news_store.index.nprobe = 100
+    news_store._normalize_L2 = True
+    news_store.distance_strategy = DistanceStrategy.COSINE
+    
+    news_store._normalize_L2 = True
+    news_store.distance_strategy = DistanceStrategy.COSINE
+
+    response = client.embeddings.create(
+      model = "Alibaba-NLP/gte-modernbert-base",
+      input = query
+    )
+
+    emb = np.array(response.data[0].embedding)
+    emb = emb / np.linalg.norm(emb)
+
+    related_news_content = []
+    result_news= news_store.similarity_search_with_score_by_vector(emb, k=500)
+    for res, score in result_news:
+        if score > 0.7:
+            print(score)
+            related_news_content.append(res)
+    
+    news_dict = defaultdict(list)
+    links = [res.metadata["link"] for res in related_news_content]
+    for idx, link in enumerate(links):
+        news_dict[link].append(related_news_content[idx].page_content)
+        
+    content_only = [". ".join(sentences) for sentences in news_dict.values()]
+    
+    return content_only, links
+
+
+def extract_information_from_triplets(query: str,
+                                      triplets: List[Tuple[str, str, str]], 
+                                      relations: List[Tuple[str, str]]) -> str:
+    """
+    REPLACE THIS FUNCTION WITH YOUR ACTUAL IMPLEMENTATION
+    
+    Args:
+        triplets: List of triplets from retrieve_triplets
+        relations: List of relation definitions from retrieve_triplets
+        
+    Returns:
+        str: Extracted information from triplets
+    """
+    system_prompt = f'''Given a a list of relational triplets and a list of relation and its definition. Extract the information from the triplets to answer query question.
+    If there is no related or useful information can be extracted from the triplets to answer the query question, inform "No related information found."
+    Give the output in paragraphs form narratively, you can explain the reason behind your answer in detail."
+    '''
+    
+    user_prompt = f'''
+    query question: {query}
+    list of triplets: {triplets}
+    list of relations and their definition: {relations}
+    extracted information:
+    '''
+
+    API_KEY = os.environ.get("TOGETHER_API_KEY")
+    client = Together(api_key = API_KEY)
+
+    response = client.chat.completions.create(
+        model="meta-llama/Llama-4-Maverick-17B-128E-Instruct-FP8",
+        temperature = 0,
+        messages=[{
+            "role": "system",
+            "content": [
+                {"type": "text", "text":system_prompt}
+            ]
+        },
+                {
+           "role": "user",
+           "content": [
+               {"type": "text", "text":user_prompt},
+            ]
+        }]
+    )
+    
+    return response.choices[0].message.content
+
+def extract_information_from_news(query: str,
+                                  news_list: Dict[str, str]) -> Tuple[str, List[str]]:
+   """   
+    Args:
+        news_list: List from retrieve_news
+        
+    Returns:
+        Extracted information string
+    """
+    system_prompt = f'''Given a list of some information related to the query, extract all important information from the list to answer query question.
+    Every item in the list represent one information, if the information is ambiguous (e.g. contains unknown pronoun to which it refers), do not use that information to answer the query.
+    You don't have to use all the information, only use the information that has clarity and a good basis, but try to use as many information as possible.
+    If there is no related or useful information can be extracted from the news information to answer the query question, write "No related information found." as the extracted_information output.
+    Give the extracted_information output in paragraphs form detailedly.
+    The output must be in this form: {{"extracted_information": <output paragraphs>}}
+    '''
+    
+    user_prompt = f'''
+    query: {query}
+    news list: {news_list}
+    output:
+    '''
+
+    response = client.chat.completions.create(
+       model="meta-llama/Llama-4-Maverick-17B-128E-Instruct-FP8",
+       response_format={
+            "type": "json_schema",
+            "schema": ExtractedInformation.model_json_schema(),
+       },
+       temperature = 0,
+       messages=[{
+           "role": "system",
+           "content": [
+               {"type": "text", "text":system_prompt}
+           ]
+       },
+                {
+           "role": "user",
+           "content": [
+               {"type": "text", "text":user_prompt},
+           ]
+       }]
+    )
+    response = json.loads(response.choices[0].message.content)
+    info = response['extracted_information']
+    
+    return info
+
+def extract_information(query:str, triplet_info: str, news_info: str, language:str) -> str:
+    """   
+    Args:
+        triplet_info: Information extracted from triplets
+        news_info: Information extracted from news
+        
+    Returns:
+        str: Final answer for the user
+    """
+    client = Together(api_key = API_KEY)
+    system_prompt = f'''Given information from two sources, combine the information and make a comprehensive and informative paragraph that answer the query.
+    Make sure the output paragraph includes all crucial information and given in detail.
+    If there is no related or useful information can be extracted from the triplets to answer the query question, inform "No related information found."
+    Remember this paragraph will be shown to user, so make sure it is based on facts and data, also use appropriate language.
+    The output must be in this form and in {language} language: {{"extracted_information": <output paragraphs>}}
+    '''
+    
+    user_prompt = f'''
+    query: {query}
+    first source: {triplet_info}
+    second source: {news_info}
+    extracted information:
+    '''
+
+    response = client.chat.completions.create(
+       model="meta-llama/Llama-4-Maverick-17B-128E-Instruct-FP8",
+       response_format={
+            "type": "json_schema",
+            "schema": ExtractedInformation.model_json_schema(),
+       },
+       temperature = 0,
+       messages=[{
+           "role": "system",
+           "content": [
+               {"type": "text", "text":system_prompt}
+           ]
+       },
+                {
+           "role": "user",
+           "content": [
+               {"type": "text", "text":user_prompt},
+           ]
+       }]
+    )
+    
+    response = json.loads(response.choices[0].message.content)
+    answer = response["extracted_information"]
+    return answer
+
+def news_preview(links: list[str]) -> Tuple[str, str, str]:
+    try:
+        preview_contents = []
+        with get_news_db() as conn:
+            for i in links:
+                cursor = conn.cursor()
+                cursor.execute("SELECT link, title, content FROM CNNHEALTHNEWS2 WHERE link = (?)", ([i]))
+                rows = cursor.fetchall()
+                prevs = [(str(row[0]), str(row[1]), str(row[2])) for row in rows]
+                preview_contents += prevs
+
+        return preview_contents
+    
+    except Exception as e:
+        print(f"Error in news_preview: {e}")
+        return ("", "", "")
+
+class Language(BaseModel):
+    query: str = Field(description="Translated query")
+    language: str = Field(description="Query's language")
+    
+def query_language(query):
+    system_prompt = f'''Your task is to determine what language the question is written in and translate it to english if it is not in English.
+    The output must be in this form: {{query: <translated query>, language: <query's language>}}
+    '''
+    
+    user_prompt = f'''
+    query: {query}
+    output:
+    '''
+    client = Together(api_key = API_KEY)
+    
+    response = client.chat.completions.create(
+       model="meta-llama/Llama-4-Maverick-17B-128E-Instruct-FP8",
+       response_format={
+            "type": "json_schema",
+            "schema": Language.model_json_schema(),
+       },
+       temperature = 0,
+       messages=[{
+           "role": "system",
+           "content": [
+               {"type": "text", "text":system_prompt}
+           ]
+       },
+                {
+           "role": "user",
+           "content": [
+               {"type": "text", "text":user_prompt},
+           ]
+       }])
+
+    return json.loads(response.choices[0].message.content)
+
+#API ENDPOINTS
+
+@app.post("/api/query", response_model=QueryResponse)
+def process_query(request: QueryRequest):
+    """Process user query and return comprehensive response"""
+    try:
+        # Step 1: Retrieve triplets
+        query = request.query
+        query = query_language(query)
+        
+        triplets_data, relations_data = retrieve_triplets(query['query'])
+        
+        # Step 2: Retrieve news
+        news_list, news_links = retrieve_news(query['query'])
+        
+        # Step 3: Extract information from triplets
+        triplet_info = extract_information_from_triplets(query['query'], triplets_data, relations_data)
+        
+        # Step 4: Extract information from news
+        news_info = extract_information_from_news(query['query'], news_list)
+        
+        # Step 5: Generate final answer
+        final_answer = extract_information(query['query'], triplet_info, news_info, query['language'])
+        
+        # Convert triplets to response format
+        triplets = [TripletData(head=t[0], relation=t[1], tail=t[2]) for t in triplets_data]
+        relations = [RelationDefinition(relation=r[0], definition=r[1]) for r in relations_data]
+        
+        # Convert news to response format with previews
+        news_prev = news_preview(news_links)
+        news_items = []
+        for url, title, content in news_prev:
+            preview = content[:300] + "..." if len(content) > 300 else content
+            news_items.append(NewsItem(
+                url=url,
+                content=content,
+                preview=preview,
+                title=title
+            ))
+        
+        # Create mini graph data for visualization
+        nodes_set = set()
+        edges = []
+        
+        for triplet in triplets_data:
+            head, relation, tail = triplet
+            nodes_set.add(head)
+            nodes_set.add(tail)
+            
+            # Find definition for this relation
+            definition = "No definition available"
+            for rel, def_text in relations_data:
+                if rel == relation:
+                    definition = def_text
+                    break
+            
+            edges.append(GraphEdge(
+                source=head,
+                target=tail,
+                relation=relation,
+                definition=definition
+            ))
+        
+        nodes = [GraphNode(id=node, label=node) for node in nodes_set]
+        graph_data = GraphData(nodes=nodes, edges=edges)
+        
+        return QueryResponse(
+            answer=final_answer,
+            triplets=triplets,
+            relations=relations,
+            news_items=news_items,
+            graph_data=graph_data
+        )
+        
+    except Exception as e:
+        print(f"Error in process_query: {e}")
+        raise HTTPException(status_code=500, detail=f"Query processing failed: {str(e)}")
+
+@app.get("/api/graph", response_model=GraphData)
+def get_graph_data(
+    search: Optional[str] = None,
+    triplets_db: sqlite3.Connection = Depends(get_triplets_connection),
+    definitions_db: sqlite3.Connection = Depends(get_definitions_connection)
+):
+    """Get complete graph data with nodes and edges."""
+    
+    try:
+        # Build dynamic query based on configuration
+        table = DATABASE_CONFIG["triplets_table"]
+        head_col = DATABASE_CONFIG["head_column"]
+        rel_col = DATABASE_CONFIG["relation_column"] 
+        tail_col = DATABASE_CONFIG["tail_column"]
+        
+        base_query = f"SELECT {head_col}, {rel_col}, {tail_col} FROM {table}"
+        params = []
+        
+        if search:
+            base_query += f" WHERE {head_col} LIKE ? OR {tail_col} LIKE ? OR {rel_col} LIKE ?"
+            search_term = f"%{search}%"
+            params = [search_term, search_term, search_term]
+        
+        base_query += " LIMIT 1000"
+        
+        # Get triplets
+        cursor = triplets_db.execute(base_query, params)
+        triplets = cursor.fetchall()
+
+        with get_definitions_db() as conn:
+            # Get definitions
+            def_table = DATABASE_CONFIG["definitions_table"]
+            def_col = DATABASE_CONFIG["definition_column"]
+            rel_col_def = DATABASE_CONFIG["relation_column"]
+            
+            def_cursor = conn.execute(f"SELECT {rel_col_def}, {def_col} FROM {def_table}")
+            definitions = {row[0]: row[1] for row in def_cursor.fetchall()}
+        
+        # Build nodes and edges
+        nodes_set = set()
+        edges = []
+        
+        for triple in triplets:
+            head = triple[0]
+            relation = triple[1]
+            tail = triple[2]
+            
+            # Add entities to nodes set
+            nodes_set.add(head)
+            nodes_set.add(tail)
+            
+            # Create edge with definition
+            edge = GraphEdge(
+                source=head,
+                target=tail,
+                relation=relation,
+                definition=definitions.get(relation, "No definition available")
+            )
+            edges.append(edge)
+        
+        # Convert nodes set to list of GraphNode objects
+        nodes = [GraphNode(id=node, label=node) for node in nodes_set]
+        
+        return GraphData(nodes=nodes, edges=edges)
+        
+    except Exception as e:
+        print(f"Error in get_graph_data: {e}")
+        raise HTTPException(status_code=500, detail=f"Database query failed: {str(e)}")
+
+if __name__ == "__main__":
+    print("Starting Knowledge Graph API...")
+    print(f"Triplets DB: {DATABASE_CONFIG['triplets_db']}")
+    print(f"Definitions DB: {DATABASE_CONFIG['definitions_db']}")
+    
+    import uvicorn
+    port = int(os.environ.get("PORT", 8000))
+    uvicorn.run(app, host="0.0.0.0", port=port)
+
+    

cnnhealthnews2.db

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e79fa0fbf55962f43d8141b44d9e80e87e96b7c1222c066ed7262e49e5d40d65
+size 12017664

explorepage.html

@@ -0,0 +1,774 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link href="https://fonts.googleapis.com/css2?family=Mandali&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Varta:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Knowledge Graph Explorer</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #4a5568 0%, #2d3748 50%, #1a202c 100%);
+            color: white;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        .container {
+            display: flex;
+            height: 100vh;
+        }
+
+        /* Sidebar Styles */
+        .sidebar {
+            width: 400px;
+            background: rgba(0 0 0 0.25);
+            display: flex;
+            flex-direction: column;
+            transition: margin-left 0.3s ease;
+            position: relative;
+            z-index: 100;
+        }
+
+        .sidebar.collapsed {
+            margin-left: -400px;
+        }
+
+        /* Header */
+        .sidebar-header {
+            padding: 1.5rem;
+        }
+
+        .header-controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+
+        /* Menu Toggle - Always Visible */
+        .menu-toggle {
+            position: fixed;
+            top: 1.5rem;
+            left: 0.7rem;
+            z-index: 300;
+            background: none;
+            border: none;
+            color: white;
+            font-size: 1.5rem;
+            cursor: pointer;
+            padding: 0.75rem;
+            border-radius: 8px;
+            backdrop-filter: blur(10px);
+        }
+
+        .menu-toggle:hover {
+            background: rgba(0, 0, 0, 0.8);
+        }
+
+        .home-btn {
+            position: fixed;
+            background: none;
+            border: none;
+            color: white;
+            font-size: 1.5rem;
+            cursor: pointer;
+            padding: 0.5rem;
+            border-radius: 4px;
+            transition: background-color 0.3s ease;
+        }
+
+        .home-btn:hover {
+            background-color: rgba(0, 0, 0, 0.8);
+        }
+
+        .sidebar-title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: #F8F3E7;
+            line-height: 1.2;
+            margin-top : 50px;
+        }
+
+        /* Search Section */
+        .search-section {
+            padding: 0 1.5rem 1.5rem;
+        }
+
+        .search-input {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            background: rgb(248 243 231);
+            border-width: 2px;
+            border-style: solid;
+            border-color: #F3E7DD;
+            border-radius: 15px;
+            font-size: 0.9rem;
+            color: #797979;
+            margin-bottom: 1rem;
+        }
+
+        .search-input::placeholder {
+            color: #a0aec0;
+        }
+
+        .search-input:focus {
+            outline: none;
+            background: rgba(255, 255, 255, 1);
+        }
+
+        .reset-btn {
+            display: block;          /* make it a block so margin works */
+            margin: 0 auto;          /* this centers it horizontally */
+            background: rgb(110 131 131);
+            border: none;
+            color: white;
+            padding: 0.75rem 1.5rem;
+            border-radius: 20px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            cursor: pointer;
+            max-width: 150px;
+            width: 100%;
+            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
+            transition: all 0.3s ease;
+        }
+
+        .reset-btn:hover {
+            background: rgba(74, 85, 104, 1);
+        }
+
+        /* Instructions Panel */
+        .instructions-panel {
+            margin: 1rem;
+            background: rgb(248 243 231);
+            border-radius: 15px;
+            padding: 1.5rem;
+            color: #4a5568;
+            flex: 1;
+            margin-bottom: 7rem;
+            box-shadow: inset 0 4px 4px rgba(0,0,0,0.25);
+        }
+
+        .instructions-title {
+            font-size: 1.5rem;
+            font-weight: 800;
+            font-family: 'Varta', sans-serif;
+            color: #485656;
+            margin-bottom: 1rem;
+            text-align: center;
+        }
+
+        .instruction-item {
+            margin-bottom: 1rem;
+            font-family: 'Varta', sans-serif;
+            font-size: 1rem;
+            color: #485656;
+            line-height: 1.5;
+            font-weight: 300;
+        }
+
+        .instruction-item:last-child {
+            margin-bottom: 0;
+        }
+
+        .instruction-action {
+            font-weight: 700;
+            color: #485656;
+        }
+
+        /* Main Graph Area */
+        .main-content {
+            flex: 1;
+            position: relative;
+            background: rgb(77 83 109);
+        }
+
+        /* Home Button in Top-Right Corner */
+        .main-home-btn {
+            position: absolute;
+            top: 1.5rem;
+            right: 1.5rem;
+            z-index: 200;
+            background: rgba(0, 0, 0, 0.6);
+            border: none;
+            color: white;
+            font-size: 1.5rem;
+            cursor: pointer;
+            padding: 0.75rem;
+            border-radius: 8px;
+            transition: background-color 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+
+        .main-home-btn:hover {
+            background: rgba(0, 0, 0, 0.8);
+        }
+
+        /* Remove floating home - not needed anymore */
+        .floating-home {
+            display: none;
+        }
+
+        /* Graph Styles */
+        #graph {
+            width: 100%;
+            height: 100%;
+        }
+
+        .node {
+            cursor: pointer;
+            transition: all 0.3s ease;
+            filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.3));
+        }
+
+        .node:hover {
+            stroke-width: 3px;
+            filter: drop-shadow(0 0 12px rgba(76, 175, 80, 0.6));
+        }
+
+        .node.highlighted {
+            stroke: #4CAF50 !important;
+            stroke-width: 3px !important;
+            filter: drop-shadow(0 0 15px rgba(76, 175, 80, 0.8));
+        }
+
+        .node.selected {
+            stroke: #FFD700 !important;
+            stroke-width: 4px !important;
+            filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
+        }
+
+        .node.dimmed {
+            opacity: 0.2;
+            filter: none;
+        }
+
+        .link {
+            stroke: rgba(255, 255, 255, 0.4);
+            stroke-width: 2px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .link:hover {
+            stroke: #4CAF50;
+            stroke-width: 3px;
+            filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.5));
+        }
+
+        .link.highlighted {
+            stroke: #4CAF50 !important;
+            stroke-width: 3px !important;
+            filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.6));
+        }
+
+        .link.dimmed {
+            opacity: 0.1;
+        }
+
+        .node-label {
+            font-size: 11px;
+            font-weight: 600;
+            fill: white;
+            text-anchor: middle;
+            pointer-events: none;
+            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
+            transition: all 0.3s ease;
+        }
+
+        .node-label.dimmed {
+            opacity: 0.2;
+        }
+
+        .node-label.highlighted {
+            fill: #4CAF50;
+            font-size: 13px;
+            text-shadow: 0 0 8px rgba(76, 175, 80, 0.8);
+        }
+
+        .tooltip {
+            position: absolute;
+            text-align: left;
+            padding: 1rem;
+            font-size: 0.9rem;
+            background: rgba(0, 0, 0, 0.9);
+            color: white;
+            border-radius: 8px;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.3s;
+            max-width: 300px;
+            line-height: 1.5;
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+            z-index: 1000;
+        }
+
+        .tooltip h4 {
+            margin: 0 0 0.5rem 0;
+            color: #4CAF50;
+            font-weight: 700;
+        }
+
+        .loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 1.1rem;
+            color: white;
+            text-align: center;
+        }
+
+        .loading-spinner {
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top: 3px solid white;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 1rem;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .error {
+            color: #ff6b6b;
+            background: rgba(255, 107, 107, 0.1);
+            padding: 1rem;
+            border-radius: 8px;
+            margin: 1rem;
+            border: 1px solid rgba(255, 107, 107, 0.3);
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .sidebar {
+                width: 100%;
+                position: absolute;
+                height: 100%;
+                z-index: 1000;
+            }
+            
+            .sidebar.collapsed {
+                margin-left: -100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Fixed Menu Toggle Button -->
+        <button class="menu-toggle" id="menuToggle">☰</button>
+        
+        <!-- Sidebar -->
+        <div class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <h1 class="sidebar-title">KNOWLEDGE<br>GRAPH</h1>
+            </div>
+            
+            <div class="search-section">
+                <input 
+                    type="text" 
+                    class="search-input" 
+                    id="searchInput"
+                    placeholder="Search nodes and relations..."
+                >
+                <button class="reset-btn" id="resetBtn">Reset Highlight</button>
+            </div>
+            
+            <div class="instructions-panel">
+                <h3 class="instructions-title">HOW TO USE</h3>
+                <div class="instruction-item">
+                    <span class="instruction-action">Click a node</span> to highlight its connections
+                </div>
+                <div class="instruction-item">
+                    <span class="instruction-action">Hover over nodes and edges</span> for details
+                </div>
+                <div class="instruction-item">
+                    <span class="instruction-action">Drag nodes</span> to reposition them
+                </div>
+                <div class="instruction-item">
+                    <span class="instruction-action">Zoom and pan</span> to explore the graph
+                </div>
+                <div class="instruction-item">
+                    <span class="instruction-action">Search</span> to filter nodes and relations
+                </div>
+            </div>
+        </div>
+
+        <!-- Main Graph Area -->
+        <div class="main-content">
+            <!-- Home Button in Top-Right -->
+            <button class="main-home-btn" id="mainHomeBtn">
+                <img src="Home.png" alt="Home" style="width: 20px; height: 20px;">
+            </button>
+            <div id="loading" class="loading">
+                <div class="loading-spinner"></div>
+                Loading knowledge graph...
+            </div>
+            <svg id="graph"></svg>
+        </div>
+    </div>
+
+    <div class="tooltip" id="tooltip"></div>
+
+    <script>
+        // Configuration
+        const API_BASE = '/api';
+        
+        // Global variables
+        let graphData = { nodes: [], edges: [] };
+        let simulation;
+        let svg, g;
+        let currentSearch = '';
+        let selectedNode = null;
+        let highlightedElements = { nodes: new Set(), edges: new Set() };
+        let sidebarCollapsed = false;
+
+        // Initialize the application
+        async function init() {
+            setupEventListeners();
+            setupVisualizationSVG();
+            await loadGraphData();
+            hideLoading();
+        }
+
+        function setupEventListeners() {
+            // Sidebar toggle
+            document.getElementById('menuToggle').addEventListener('click', toggleSidebar);
+            document.getElementById('mainHomeBtn').addEventListener('click', goHome);
+            
+            // Search and reset
+            document.getElementById('searchInput').addEventListener('input', debounce(handleSearch, 300));
+            document.getElementById('resetBtn').addEventListener('click', resetHighlighting);
+        }
+
+        function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            sidebarCollapsed = !sidebarCollapsed;
+            
+            if (sidebarCollapsed) {
+                sidebar.classList.add('collapsed');
+            } else {
+                sidebar.classList.remove('collapsed');
+            }
+        }
+
+        function goHome() {
+            // Navigate back to main page
+            window.location.href = 'index.html'; // Adjust path as needed
+        }
+
+        function setupVisualizationSVG() {
+            const container = document.querySelector('.main-content');
+            const containerRect = container.getBoundingClientRect();
+            
+            svg = d3.select('#graph')
+                .attr('width', containerRect.width)
+                .attr('height', containerRect.height);
+
+            g = svg.append('g');
+
+            // Add zoom behavior
+            const zoom = d3.zoom()
+                .scaleExtent([0.1, 4])
+                .on('zoom', (event) => {
+                    g.attr('transform', event.transform);
+                });
+
+            svg.call(zoom);
+
+            // Click on empty space to reset highlighting
+            svg.on('click', (event) => {
+                if (event.target === event.currentTarget) {
+                    resetHighlighting();
+                }
+            });
+        }
+
+        async function loadGraphData(search = '') {
+        try {
+            showLoading();
+            const url = search 
+                ? `${API_BASE}/graph?search=${encodeURIComponent(search)}`
+                : `${API_BASE}/graph`;
+            
+            const response = await fetch(url);
+            if (!response.ok) throw new Error('Failed to fetch graph data');
+            
+            graphData = await response.json();
+            renderGraph();
+        } catch (error) {
+            showError('Failed to load graph data: ' + error.message);
+        } finally {
+            hideLoading();
+        }
+    }
+
+        function renderGraph() {
+            if (!graphData.nodes || graphData.nodes.length === 0) {
+                showError('No data to display');
+                return;
+            }
+
+            // Clear existing elements
+            g.selectAll('*').remove();
+            resetHighlighting();
+
+            // Get container dimensions
+            const width = +svg.attr('width');
+            const height = +svg.attr('height');
+
+            // Create simulation
+            simulation = d3.forceSimulation(graphData.nodes)
+                .force('link', d3.forceLink(graphData.edges).id(d => d.id).distance(100))
+                .force('charge', d3.forceManyBody().strength(-300))
+                .force('center', d3.forceCenter(width / 2, height / 2))
+                .force('collision', d3.forceCollide().radius(30));
+
+            // Create links
+            const link = g.append('g')
+                .selectAll('line')
+                .data(graphData.edges)
+                .join('line')
+                .attr('class', 'link')
+                .on('mouseover', showEdgeTooltip)
+                .on('mouseout', hideTooltip);
+
+            // Create nodes
+            const node = g.append('g')
+                .selectAll('circle')
+                .data(graphData.nodes)
+                .join('circle')
+                .attr('class', 'node')
+                .attr('r', 12)
+                .attr('fill', d => getNodeColor(d))
+                .attr('stroke', '#fff')
+                .attr('stroke-width', 2)
+                .on('mouseover', showNodeTooltip)
+                .on('mouseout', hideTooltip)
+                .on('click', handleNodeClick)
+                .call(d3.drag()
+                    .on('start', dragStarted)
+                    .on('drag', dragged)
+                    .on('end', dragEnded));
+
+            // Create labels
+            const labels = g.append('g')
+                .selectAll('text')
+                .data(graphData.nodes)
+                .join('text')
+                .attr('class', 'node-label')
+                .text(d => d.label.length > 12 ? d.label.substring(0, 12) + '...' : d.label);
+
+            // Update positions on simulation tick
+            simulation.on('tick', () => {
+                link
+                    .attr('x1', d => d.source.x)
+                    .attr('y1', d => d.source.y)
+                    .attr('x2', d => d.target.x)
+                    .attr('y2', d => d.target.y);
+
+                node
+                    .attr('cx', d => d.x)
+                    .attr('cy', d => d.y);
+
+                labels
+                    .attr('x', d => d.x)
+                    .attr('y', d => d.y + 20);
+            });
+        }
+
+        function getNodeColor(node) {
+            const colors = {
+                'concept': '#4CAF50',
+                'disease': '#f44336',
+                'treatment': '#2196F3',
+                'attribute': '#FF9800',
+                'method': '#9C27B0',
+                'default': '#607D8B'
+            };
+            return colors[node.type] || colors.default;
+        }
+
+        function showNodeTooltip(event, d) {
+            const tooltip = d3.select('#tooltip');
+            tooltip.transition().duration(200).style('opacity', 1);
+            
+            const connectionCount = graphData.edges.filter(edge => 
+                edge.source.id === d.id || edge.target.id === d.id
+            ).length;
+            
+            tooltip.html(`
+                <h4>${d.label}</h4>
+                <p><strong>Type:</strong> ${d.type || 'Node'}</p>
+                <p><strong>Connections:</strong> ${connectionCount}</p>
+                <p>Click to highlight connections</p>
+            `)
+                .style('left', (event.pageX + 10) + 'px')
+                .style('top', (event.pageY - 28) + 'px');
+        }
+
+        function showEdgeTooltip(event, d) {
+            const tooltip = d3.select('#tooltip');
+            tooltip.transition().duration(200).style('opacity', 1);
+            tooltip.html(`
+                <h4>${d.relation}</h4>
+                <p><strong>From:</strong> ${d.source.label || d.source.id}</p>
+                <p><strong>To:</strong> ${d.target.label || d.target.id}</p>
+            `)
+                .style('left', (event.pageX + 10) + 'px')
+                .style('top', (event.pageY - 28) + 'px');
+        }
+
+        function hideTooltip() {
+            d3.select('#tooltip').transition().duration(500).style('opacity', 0);
+        }
+
+        function handleNodeClick(event, d) {
+            event.stopPropagation();
+            
+            if (selectedNode && selectedNode.id === d.id) {
+                resetHighlighting();
+                return;
+            }
+
+            selectedNode = d;
+            highlightConnections(d);
+        }
+
+        function highlightConnections(selectedNode) {
+            highlightedElements.nodes.clear();
+            highlightedElements.edges.clear();
+
+            graphData.edges.forEach(edge => {
+                if (edge.source.id === selectedNode.id || edge.target.id === selectedNode.id) {
+                    highlightedElements.edges.add(edge);
+                    highlightedElements.nodes.add(edge.source.id);
+                    highlightedElements.nodes.add(edge.target.id);
+                }
+            });
+
+            applyHighlighting();
+        }
+
+        function applyHighlighting() {
+            g.selectAll('.node')
+                .classed('highlighted', d => highlightedElements.nodes.has(d.id) && (!selectedNode || d.id !== selectedNode.id))
+                .classed('selected', d => selectedNode && d.id === selectedNode.id)
+                .classed('dimmed', d => selectedNode && !highlightedElements.nodes.has(d.id));
+
+            g.selectAll('.link')
+                .classed('highlighted', d => highlightedElements.edges.has(d))
+                .classed('dimmed', d => selectedNode && !highlightedElements.edges.has(d));
+
+            g.selectAll('.node-label')
+                .classed('highlighted', d => highlightedElements.nodes.has(d.id))
+                .classed('dimmed', d => selectedNode && !highlightedElements.nodes.has(d.id));
+        }
+
+        function resetHighlighting() {
+            selectedNode = null;
+            highlightedElements.nodes.clear();
+            highlightedElements.edges.clear();
+
+            g.selectAll('.node')
+                .classed('highlighted', false)
+                .classed('selected', false)
+                .classed('dimmed', false);
+
+            g.selectAll('.link')
+                .classed('highlighted', false)
+                .classed('dimmed', false);
+
+            g.selectAll('.node-label')
+                .classed('highlighted', false)
+                .classed('dimmed', false);
+        }
+
+        async function handleSearch() {
+            const query = document.getElementById('searchInput').value.trim();
+            if (query === currentSearch) return;
+            
+            currentSearch = query;
+            await loadGraphData(query);
+        }
+
+        function showError(message) {
+            const mainContent = document.querySelector('.main-content');
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'error';
+            errorDiv.textContent = message;
+            mainContent.appendChild(errorDiv);
+            setTimeout(() => errorDiv.remove(), 5000);
+        }
+
+        function showLoading() {
+            document.getElementById('loading').style.display = 'block';
+        }
+
+        function hideLoading() {
+            document.getElementById('loading').style.display = 'none';
+        }
+
+        function debounce(func, wait) {
+            let timeout;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        }
+
+        // Drag functions
+        function dragStarted(event, d) {
+            if (!event.active) simulation.alphaTarget(0.3).restart();
+            d.fx = d.x;
+            d.fy = d.y;
+        }
+
+        function dragged(event, d) {
+            d.fx = event.x;
+            d.fy = event.y;
+        }
+
+        function dragEnded(event, d) {
+            if (!event.active) simulation.alphaTarget(0);
+            d.fx = null;
+            d.fy = null;
+        }
+
+        // Window resize handler
+        window.addEventListener('resize', () => {
+            const container = document.querySelector('.main-content');
+            const containerRect = container.getBoundingClientRect();
+            
+            svg.attr('width', containerRect.width)
+               .attr('height', containerRect.height);
+            
+            if (simulation) {
+                simulation.force('center', d3.forceCenter(containerRect.width / 2, containerRect.height / 2));
+                simulation.alpha(0.3).restart();
+            }
+        });
+
+        // Initialize when DOM is loaded
+        document.addEventListener('DOMContentLoaded', init);
+    </script>
+</body>
+</html>

index.html

@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Knowledge Graph</title>
+    <style>
+        /* Reset and base styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            height: 100vh;
+            overflow: hidden;
+            position: relative;
+            background: linear-gradient(180deg, #F8F3E7 35%, #708686 90%);
+        }
+
+        /* Background Graph Network */
+        .background-network {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+            pointer-events: none;
+        }
+
+        .network-lines {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+        }
+
+        .network-nodes {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 3;
+        }
+
+        .network-node {
+            position: absolute;
+            border-radius: 50%;
+            opacity: 1;
+        }
+
+        .network-line {
+            position: absolute;
+            background-color: #5f6b7a;
+            height: 1.5px;
+            opacity: 0.4;
+            transform-origin: left center;
+        }
+
+        /* Node colors and sizes - exact match to your design */
+        .node-teal { background-color: #A9C5C5; }
+        .node-purple-light { background-color: #DBCAE1; }
+        .node-blue-light { background-color: #B0C4DE; }
+
+        .node-small { width: 35px; height: 35px; }
+        .node-medium { width: 50px; height: 50px; }
+        .node-large { width: 85px; height: 85px; }
+
+        /* Login Button as Network Node */
+        .login-node {
+            position: absolute;
+            background-color: #64748b;
+            border-radius: 50%;
+            width: 80px;
+            height: 80px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            font-weight: 500;
+            color: white;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            z-index: 100;
+            pointer-events: auto;
+            opacity: 1;
+        }
+
+        .login-node:hover {
+            background-color: #475569;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+        }
+
+        .login-icon {
+            font-size: 20px;
+            margin-bottom: 2px;
+        }
+
+        /* Main Content */
+        .main-content {
+            position: relative;
+            z-index: 10;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            padding: 0 40px;
+        }
+
+        /* Title Section */
+        .title-section {
+            margin-bottom: 0px;
+        }
+
+        .main-title {
+            font-family: 'Kumbh Sans', sans-serif;
+            font-size: 4.5rem;
+            font-weight: 700;
+            color: #4D536D;
+            letter-spacing: -0.02em;
+            margin-top: 120px;
+            line-height: 1.1;
+        }
+
+        .subtitle {
+            font-family: 'Mandali', sans-serif;
+            font-size: 1.125rem;
+            color: #4D536D;
+            font-weight: 400;
+            line-height: 1.6;
+            max-width: 500px;
+            margin: 0 auto 10px;
+        }
+
+        .subtitle-second {
+            font-family: 'Mandali', sans-serif;
+            font-size: 1.125rem;
+            color: #4D536D;
+            font-weight: 400;
+        }
+
+        /* Search Section */
+        /* Ganti max-width kalo mau ubah lebar */
+        .search-container {
+            width: 100%;
+            max-width: 740px; 
+            margin-top: 20px;
+        }
+
+        .search-input {
+            width: 100%;
+            padding: 16px 22px;
+            font-size: 1rem;
+            border: none;
+            border-radius: 25px;
+            background-color: rgb(243, 231, 221);
+            color: #64748b;
+            outline: none;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
+            margin-bottom: 15px;
+        }
+
+        .search-input::placeholder {
+            color: #797979;
+            font-weight: 400;
+        }
+
+        .search-input:focus {
+            background-color: rgba(255, 255, 255, 1);
+            box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);
+            transform: translateY(-2px);
+        }
+
+        .search-btn {
+            background-color: #4D536D;
+            color: white;
+            border: none;
+            border-radius: 20px;
+            padding: 12px 32px;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
+        }
+
+        .search-btn:hover {
+            background-color: #475569;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(100, 116, 139, 0.4);
+        }
+
+        .search-btn:active {
+            transform: translateY(0);
+        }
+
+        /* Divider */
+        .divider-container {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            max-width: 400px;
+            margin: 30px 0;
+            margin-top: 15px;
+        }
+
+        .divider-line {
+            flex: 1;
+            height: 1px;
+            background-color: rgb(255 255 255);
+        }
+
+        .divider-text {
+            margin: 0 20px;
+            color: #FFFFFF;
+            font-size: 1rem;
+            font-weight: 500;
+        }
+
+        /* Explore Button */
+        .explore-btn {
+            background-color: #4D536D;
+            color: white;
+            border: none;
+            border-radius: 25px;
+            padding: 16px 48px;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
+            width: 100%;
+            max-width: 520px;
+        }
+
+        .explore-btn:hover {
+            background-color: #475569;
+            transform: translateY(-3px);
+            box-shadow: 0 8px 30px rgba(100, 116, 139, 0.4);
+        }
+
+        .explore-btn:active {
+            transform: translateY(-1px);
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .main-title {
+                font-size: 3rem;
+            }
+            
+            .subtitle, .subtitle-second {
+                font-size: 1rem;
+            }
+            
+            .main-content {
+                padding: 0 20px;
+            }
+            
+            .login-btn {
+                width: 60px;
+                height: 60px;
+                font-size: 10px;
+            }
+            
+            .login-icon {
+                font-size: 16px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .main-title {
+                font-size: 2.5rem;
+            }
+            
+            .login-container {
+                top: 20px;
+                right: 20px;
+            }
+        }
+
+        /* Animation for network elements */
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+        }
+
+        .network-node {
+            animation: float 6s ease-in-out infinite;
+        }
+
+        .network-node:nth-child(2n) {
+            animation-delay: -2s;
+        }
+
+        .network-node:nth-child(3n) {
+            animation-delay: -4s;
+        }
+    </style>
+</head>
+<body>
+    <!-- Background Network -->
+    <div class="background-network" id="backgroundNetwork">
+        <div class="network-lines" id="networkLines"></div>
+        <div class="network-nodes" id="networkNodes"></div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="main-content">
+        <div class="title-section">
+            <h1 class="main-title">KNOWLEDGE GRAPH</h1>
+            <p class="subtitle">Explore health insights powered by national news</p>
+            <p class="subtitle-second">ask, discover, and learn.</p>
+        </div>
+
+        <div class="search-container">
+            <input 
+                type="text" 
+                class="search-input" 
+                id="queryInput"
+                placeholder="Type Query"
+                onkeypress="handleKeyPress(event)"
+            >
+            <button class="search-btn" onclick="handleSearch()">Search</button>
+        </div>
+
+        <div class="divider-container">
+            <div class="divider-line"></div>
+            <span class="divider-text">OR</span>
+            <div class="divider-line"></div>
+        </div>
+
+        <button class="explore-btn" onclick="handleExplore()">Explore Knowledge Graph</button>
+    </div>
+
+    <script>
+        // Create background network - exact placement matching your image
+        function createBackgroundNetwork() {
+            const linesContainer = document.getElementById('networkLines');
+            const nodesContainer = document.getElementById('networkNodes');
+            const nodes = [];
+            
+            // Exact node positions from your image
+            const nodeConfigs = [
+                // Top row (left to right, some truncated)
+                { x: -1, y: -3, size: 'large', color: 'blue-light' }, 
+                { x: 16, y: 3, size: 'medium', color: 'purple-light' },
+                { x: 32, y: -5, size: 'large', color: 'teal' },
+                { x: 55, y: 2, size: 'medium', color: 'blue-light' },
+                { x: 68, y: -4, size: 'small', color: 'purple-light' },
+                { x: 86, y: -1, size: 'small', color: 'purple-light' },
+                { x: 100, y: -1, size: 'small', color: 'blue-light' },
+                
+                // Login node (top right as in image)
+                { x: 92, y: 2, size: 'login', color: 'login' },
+                
+                // Second row
+                { x: 7, y: 15, size: 'small', color: 'teal' },
+                { x: 25, y: 12, size: 'small', color: 'blue-light' },
+                { x: 44, y: 12, size: 'medium', color: 'purple-light' },
+                { x: 58, y: 15, size: 'small', color: 'teal' },
+                { x: 72, y: 6, size: 'large', color: 'purple-light' },
+                { x: 82, y: 11, size: 'small', color: 'teal' },
+                
+                // Third row (more scattered)
+                { x: 32, y: 18, size: 'medium', color: 'blue-light' },
+                { x: 100, y: 15, size: 'small', color: 'teal' },
+            ];
+
+            // Create nodes including login
+            nodeConfigs.forEach((config, index) => {
+                if (config.color === 'login') {
+                    const loginNode = document.createElement('div');
+                    loginNode.className = 'login-node';
+                    loginNode.style.left = `${config.x}%`;
+                    loginNode.style.top = `${config.y}%`;
+                    loginNode.style.animation = 'float 6s ease-in-out infinite';
+                    loginNode.style.animationDelay = '-2s';
+                    loginNode.onclick = handleLogin;
+                    loginNode.innerHTML = `
+                        <div class="login-icon">👤</div>
+                        <div>Login</div>
+                    `;
+                    nodesContainer.appendChild(loginNode);
+                } else {
+                    const node = document.createElement('div');
+                    node.className = `network-node node-${config.size} node-${config.color}`;
+                    node.style.left = `${config.x}%`;
+                    node.style.top = `${config.y}%`;
+                    nodesContainer.appendChild(node);
+                }
+                
+                nodes.push({
+                    x: config.x,
+                    y: config.y,
+                    index: index,
+                    isLogin: config.color === 'login'
+                });
+            });
+
+            // Connections matching your image exactly
+            const connections = [
+                // Top row main connections
+                [0, 1], [1, 2], [2, 3], [3, 4], [4, 5],
+                
+                // Login connections (as shown in image)
+                [7, 5], [7, 13], [7, 6], [7, 15],
+                
+                // Vertical connections from top to second row
+                [0, 8], [1, 9], [2, 9], [3, 10], [5, 12], [12, 13], [3, 12],
+                
+                // Second row horizontal connections
+                [8, 9], [10, 11], [11, 12],
+                
+                // Connections to third row
+                [9, 14], [10, 14],
+                
+                // Some cross connections for the web-like structure
+                [2, 10], [4, 12]
+            ];
+
+            // Create connection lines
+            connections.forEach(([startIdx, endIdx]) => {
+                const startNode = nodes[startIdx];
+                const endNode = nodes[endIdx];
+                
+                if (startNode && endNode) {
+                    const line = document.createElement('div');
+                    line.className = 'network-line';
+                    
+                    const startSize = startNode.isLogin ? 40 : 20;
+                    const endSize = endNode.isLogin ? 40 : 20;
+                    
+                    const startX = (startNode.x * window.innerWidth) / 100 + startSize;
+                    const startY = (startNode.y * window.innerHeight) / 100 + startSize;
+                    const endX = (endNode.x * window.innerWidth) / 100 + endSize;
+                    const endY = (endNode.y * window.innerHeight) / 100 + endSize;
+                    
+                    const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
+                    const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;
+                    
+                    line.style.left = `${startX}px`;
+                    line.style.top = `${startY}px`;
+                    line.style.width = `${length}px`;
+                    line.style.transform = `rotate(${angle}deg)`;
+                    
+                    linesContainer.appendChild(line);
+                }
+            });
+        }
+
+        // Event handlers
+        function handleLogin() {
+            alert('Login functionality will be implemented when you provide the login page design.');
+            console.log('Login clicked');
+        }
+
+        function handleSearch() {
+            const query = document.getElementById('queryInput').value.trim();
+            if (query) {
+                // Navigate to results page with query parameter
+                window.location.href = `search.html?q=${encodeURIComponent(query)}`;
+            } else {
+                alert('Please enter a query to search.');
+            }
+        }
+
+        function handleExplore() {
+            // alert('Explore Knowledge Graph functionality will be implemented when you provide the graph page design.');
+            console.log('Explore Knowledge Graph clicked');
+            window.location.href = 'explorepage.html'; // Change this line
+        }
+
+        function handleKeyPress(event) {
+            if (event.key === 'Enter') {
+                handleSearch();
+            }
+        }
+
+        // Initialize the background network when page loads
+        window.addEventListener('load', () => {
+            createBackgroundNetwork();
+        });
+
+        // Recreate network on window resize
+        window.addEventListener('resize', () => {
+            document.getElementById('networkLines').innerHTML = '';
+            document.getElementById('networkNodes').innerHTML = '';
+            createBackgroundNetwork();
+        });
+
+        // Add some interactivity to the input
+        document.addEventListener('DOMContentLoaded', () => {
+            const input = document.getElementById('queryInput');
+            
+            input.addEventListener('focus', () => {
+                input.style.transform = 'translateY(-2px)';
+            });
+            
+            input.addEventListener('blur', () => {
+                input.style.transform = 'translateY(0)';
+            });
+        });
+    </script>
+</body>
+</html>

news_index_compressed/index.faiss

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:985baf5c4bcef7970307185b6f0287b67d92a3f67a1fd9c2b32c87e9b20c1163
+size 30973636

news_index_compressed/index.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9bf3c4ecaf35a6aefc26b045519fdc0408e2fd1ada5d3ea1c59b0d649e566669
+size 14304568

relations_new.db

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:17deb71333b7cfde910d14b00609c2792b38520f3f5ee18e0b8065448dca2b17
+size 1294336

requirements.txt

@@ -0,0 +1,7 @@
+langchain-community
+faiss-cpu
+pydantic
+together
+numpy
+fastapi
+uvicorn

search.html

@@ -0,0 +1,879 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Varta:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <title>Search Results - Knowledge Graph</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(180deg, #708686 0%, #F8F3E7 100%);
+            min-height: 100vh;
+            padding: 2rem;
+        }
+
+        .container {
+            max-width: 1450px;
+            margin: 0 auto;
+        }
+
+        /* Header Section */
+        .header {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .home-btn {
+            position: absolute;
+            top: 1.5rem;
+            right: 1.5rem;
+            z-index: 200;
+            background: none;
+            border: none;
+            color: white;
+            font-size: 1.5rem;
+            cursor: pointer;
+            padding: 0.75rem;
+            border-radius: 8px;
+            transition: background-color 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+
+        .home-btn:hover {
+            background: white;
+            transform: translateY(-2px);
+        }
+
+        .search-container {
+            flex: 1;
+            display: flex;
+            gap: 1rem;
+            height: 50px;   
+            margin-top: 4rem;
+            display: flex;
+        }
+
+        .search-input {
+            flex: 1;
+            padding: 16px 22px;
+            border: none;
+            border-radius: 25px;
+            background: rgb(248 243 231);
+            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
+            font-size: 1rem;
+            color: #797979;
+        }
+
+        .search-input::placeholder {
+            color: #797979;
+            font-weight: 400;
+        }
+
+        .search-input:focus {
+            outline: none;
+            background: white;
+        }
+
+        .search-btn {
+            background-color: #4D536D;
+            color: white;
+            border: none;
+            border-radius: 20px;
+            padding: 12px 32px;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
+        }
+
+        .search-btn:hover {
+            background: #2d3748;
+            transform: translateY(-2px);
+        }
+
+        /* Main Content Grid */
+        .content-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        /* Answer Section */
+        .answer-section {
+            background: rgb(248 243 231);
+            border-radius: 15px;
+            padding: 2rem;
+            color: #4a5568;
+        }
+
+        .answer-title {
+            font-size: 1.5rem;
+            font-family: 'Varta', sans-serif;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            color: #000000;
+        }
+
+        .answer-content {
+            max-height: 300px;
+            overflow-y: auto;
+            line-height: 1.6;
+            font-family: 'Varta', sans-serif;
+            font-size: 1rem;
+            color: #000000;
+            white-space: pre-wrap;
+        }
+
+        .answer-content::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .answer-content::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 3px;
+        }
+
+        .answer-content::-webkit-scrollbar-thumb {
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 3px;
+        }
+
+        .answer-content::-webkit-scrollbar-thumb:hover {
+            background: rgba(0, 0, 0, 0.5);
+        }
+
+        /* Knowledge Graph Section */
+        .graph-section {
+            background: #4a5568;
+            border-radius: 15px;
+            padding: 2rem;
+            color: white;
+        }
+
+        .graph-title {
+            font-size: 1.5rem;
+            font-family: 'Varta', sans-serif;
+            font-weight: 700;
+            margin-bottom: 1rem;
+        }
+
+        .mini-graph-container {
+            width: 100%;
+            height: 300px;
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        #miniGraph {
+            width: 100%;
+            height: 100%;
+            cursor: grab;
+        }
+
+        #miniGraph:active {
+            cursor: grabbing;
+        }
+
+        /* News Section */
+        .news-section {
+            background: rgba(77, 83, 109, 0.5);
+            border-radius: 15px;
+            padding: 2rem;
+            color: white;
+            grid-column: 1 / -1;
+        }
+
+        .news-title {
+            font-family: 'Varta', sans-serif;
+            font-size: 1.5rem;
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+        }
+
+        .news-grid {
+            display: grid;
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+
+        .news-item {
+            background: rgb(77, 83, 109);
+            border-radius: 10px;
+            padding: 1.5rem;
+            transition: all 0.3s ease;
+        }
+
+        .news-item:hover {
+            background: rgba(45, 55, 72, 1);
+            transform: translateY(-2px);
+        }
+
+        .news-item-title {
+            font-family: 'Varta', sans-serif;
+            font-size: 1.1rem;
+            font-weight: 600;
+            margin-bottom: 0.75rem;
+            color: #F8F3E7;
+        }
+
+        .news-item-preview {
+            font-family: 'Varta', sans-serif;
+            font-size: 0.95rem;
+            line-height: 1.5;
+            color: #F8F3E7;
+            margin-bottom: 0.7rem;
+        }
+
+        .read-full-btn {
+            background: rgba(255, 255, 255, 0.1);
+            color: #A9C5C5;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 0.5rem 1rem;
+            border-radius: 6px;
+            font-size: 0.875rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-block;
+        }
+
+        .read-full-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+        }
+
+        /* Pagination */
+        .pagination {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+            align-items: center;
+        }
+
+        .page-btn {
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            padding: 0.75rem 1.5rem;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-family: 'Varta', sans-serif;
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
+
+        .page-btn:hover:not(:disabled) {
+            background: rgba(255, 255, 255, 0.3);
+        }
+
+        .page-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .page-info {
+            color: rgba(255, 255, 255, 0.8);
+            font-family: 'Varta', sans-serif;
+            font-size: 0.9rem;
+        }
+
+        /* Graph Tooltip */
+        .tooltip {
+            position: absolute;
+            text-align: left;
+            padding: 0.75rem;
+            font-size: 0.875rem;
+            background: rgba(0, 0, 0, 0.9);
+            color: white;
+            border-radius: 6px;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.3s;
+            max-width: 250px;
+            line-height: 1.4;
+            z-index: 1000;
+        }
+
+        .tooltip h4 {
+            margin: 0 0 0.5rem 0;
+            color: #4CAF50;
+            font-size: 0.875rem;
+        }
+
+        /* Loading States */
+        .loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 200px;
+            color: #666;
+        }
+
+        .loading-spinner {
+            border: 2px solid rgba(0, 0, 0, 0.1);
+            border-radius: 50%;
+            border-top: 2px solid #4a5568;
+            width: 20px;
+            height: 20px;
+            animation: spin 1s linear infinite;
+            margin-right: 0.5rem;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* Node and Link Styles */
+        .node {
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .node:hover {
+            stroke-width: 3px;
+        }
+
+        .node.highlighted {
+            stroke: #4CAF50 !important;
+            stroke-width: 3px !important;
+        }
+
+        .node.selected {
+            stroke: #FFD700 !important;
+            stroke-width: 4px !important;
+        }
+
+        .node.dimmed {
+            opacity: 0.3;
+        }
+
+        .link {
+            stroke: rgba(255, 255, 255, 0.6);
+            stroke-width: 1.5px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .link:hover {
+            stroke: #4CAF50;
+            stroke-width: 2px;
+        }
+
+        .link.highlighted {
+            stroke: #4CAF50 !important;
+            stroke-width: 2px !important;
+        }
+
+        .link.dimmed {
+            opacity: 0.1;
+        }
+
+        .node-label {
+            font-size: 10px;
+            font-weight: 600;
+            fill: white;
+            text-anchor: middle;
+            pointer-events: none;
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+            transition: all 0.3s ease;
+        }
+
+        .node-label.dimmed {
+            opacity: 0.3;
+        }
+
+        .node-label.highlighted {
+            fill: #4CAF50;
+            font-size: 11px;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .content-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .header {
+                flex-direction: column;
+                gap: 1rem;
+            }
+            
+            .search-container {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Header with Search -->
+        <div class="header">
+            <button class="home-btn" id="homeBtn" title="Go to Home">
+                <img src="Home.png" alt="Home" style="width: 20px; height: 20px;">
+            </button>
+            <div class="search-container">
+                <input 
+                    type="text" 
+                    class="search-input" 
+                    id="searchInput"
+                    placeholder="Type Query"
+                >
+                <button class="search-btn" id="searchBtn">Search</button>
+            </div>
+        </div>
+
+        <!-- Main Content Grid -->
+        <div class="content-grid">
+            <!-- Answer Section -->
+            <div class="answer-section">
+                <h2 class="answer-title">Answer for: <span id="queryDisplay">[Query]</span></h2>
+                <div class="answer-content" id="answerContent">
+                    <div class="loading">
+                        <div class="loading-spinner"></div>
+                        Loading answer...
+                    </div>
+                </div>
+            </div>
+
+            <!-- Knowledge Graph Section -->
+            <div class="graph-section">
+                <h2 class="graph-title">Knowledge Graph</h2>
+                <div class="mini-graph-container">
+                    <svg id="miniGraph"></svg>
+                </div>
+            </div>
+        </div>
+
+        <!-- News Section -->
+        <div class="news-section">
+            <h2 class="news-title">Recommended News</h2>
+            <div class="news-grid" id="newsGrid">
+                <div class="loading">
+                    <div class="loading-spinner"></div>
+                    Loading news...
+                </div>
+            </div>
+            
+            <!-- Pagination -->
+            <div class="pagination">
+                <button class="page-btn" id="prevBtn" disabled>← Back</button>
+                <span class="page-info" id="pageInfo">Page 1</span>
+                <button class="page-btn" id="nextBtn">Next →</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Tooltip -->
+    <div class="tooltip" id="tooltip"></div>
+
+    <script>
+        // Configuration
+        const API_BASE = '/api';
+        
+        // Global variables
+        let currentQuery = '';
+        let graphData = { nodes: [], edges: [] };
+        let newsData = [];
+        let currentPage = 1;
+        let newsPerPage = 3;
+        let simulation;
+        let svg, g;
+        let selectedNode = null;
+        let highlightedElements = { nodes: new Set(), edges: new Set() };
+
+        // Initialize the application
+        async function init() {
+            setupEventListeners();
+            setupMiniGraph();
+            
+            // Get query from URL params or storage
+            const urlParams = new URLSearchParams(window.location.search);
+            const query = urlParams.get('q') || sessionStorage.getItem('currentQuery') || '';
+            
+            if (query) {
+                document.getElementById('searchInput').value = query;
+                document.getElementById('queryDisplay').textContent = query;
+                currentQuery = query;
+                await handleSearch(false); // Don't update URL again
+            }
+        }
+
+        function setupEventListeners() {
+            // Navigation
+            document.getElementById('homeBtn').addEventListener('click', goHome);
+            
+            // Search
+            document.getElementById('searchBtn').addEventListener('click', () => handleSearch(true));
+            document.getElementById('searchInput').addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') handleSearch(true);
+            });
+            
+            // Pagination
+            document.getElementById('prevBtn').addEventListener('click', () => changePage(-1));
+            document.getElementById('nextBtn').addEventListener('click', () => changePage(1));
+        }
+
+        function goHome() {
+            window.location.href = 'index.html';
+        }
+
+        function setupMiniGraph() {
+            const container = document.getElementById('miniGraph');
+            const containerRect = container.getBoundingClientRect();
+            
+            svg = d3.select('#miniGraph')
+                .attr('width', containerRect.width)
+                .attr('height', containerRect.height);
+
+            g = svg.append('g');
+
+            // Add zoom behavior
+            const zoom = d3.zoom()
+                .scaleExtent([0.5, 3])
+                .on('zoom', (event) => {
+                    g.attr('transform', event.transform);
+                });
+
+            svg.call(zoom);
+
+            // Reset on click
+            svg.on('click', (event) => {
+                if (event.target === event.currentTarget) {
+                    resetHighlighting();
+                }
+            });
+        }
+
+        async function handleSearch(updateUrl = true) {
+            const query = document.getElementById('searchInput').value.trim();
+            if (!query) return;
+        
+            currentQuery = query;
+            document.getElementById('queryDisplay').textContent = query;
+            
+            // Reset all content areas to loading state immediately
+            document.getElementById('answerContent').innerHTML = `
+                <div class="loading">
+                    <div class="loading-spinner"></div>
+                    Loading answer...
+                </div>
+            `;
+            
+            document.getElementById('newsGrid').innerHTML = `
+                <div class="loading">
+                    <div class="loading-spinner"></div>
+                    Loading news...
+                </div>
+            `;
+            
+            // Clear existing graph
+            if (g) {
+                g.selectAll('*').remove();
+                resetHighlighting();
+            }
+            
+            // Reset pagination
+            document.getElementById('pageInfo').textContent = 'Loading...';
+            document.getElementById('prevBtn').disabled = true;
+            document.getElementById('nextBtn').disabled = true;
+            
+            if (updateUrl) {
+                const url = new URL(window.location);
+                url.searchParams.set('q', query);
+                window.history.pushState({}, '', url);
+                sessionStorage.setItem('currentQuery', query);
+            }
+        
+            // Call API to get new results
+            await loadAnswer(query);
+        }
+
+        async function loadAnswer(query) {
+            try {
+                const response = await fetch(`${API_BASE}/query`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ query: query })
+                });
+        
+                if (!response.ok) throw new Error('Failed to get answer');
+        
+                const data = await response.json();
+                
+                // Display the answer
+                document.getElementById('answerContent').textContent = data.answer || 'No answer available.';
+                
+                // Extract and render graph data from the same response
+                if (data.graph_data) {
+                    graphData = data.graph_data;
+                    renderMiniGraph();
+                }
+                
+                // Also handle news data here if it's in the same response
+                if (data.news_items) {
+                    newsData = data.news_items;
+                    currentPage = 1;
+                    renderNews();
+                }
+                
+            } catch (error) {
+                console.error('Answer loading error:', error);
+                document.getElementById('answerContent').textContent = 'Failed to load answer. Please try again.';
+            }
+        }
+
+        function renderMiniGraph() {
+            if (!graphData.nodes || graphData.nodes.length === 0) return;
+
+            // Clear existing
+            g.selectAll('*').remove();
+            resetHighlighting();
+
+            const width = +svg.attr('width');
+            const height = +svg.attr('height');
+
+            // Create simulation
+            simulation = d3.forceSimulation(graphData.nodes)
+                .force('link', d3.forceLink(graphData.edges).id(d => d.id).distance(60))
+                .force('charge', d3.forceManyBody().strength(-200))
+                .force('center', d3.forceCenter(width / 2, height / 2))
+                .force('collision', d3.forceCollide().radius(15));
+
+            // Create links
+            const link = g.append('g')
+                .selectAll('line')
+                .data(graphData.edges)
+                .join('line')
+                .attr('class', 'link')
+                .on('mouseover', showEdgeTooltip)
+                .on('mouseout', hideTooltip);
+
+            // Create nodes
+            const node = g.append('g')
+                .selectAll('circle')
+                .data(graphData.nodes)
+                .join('circle')
+                .attr('class', 'node')
+                .attr('r', 8)
+                .attr('fill', d => getNodeColor(d))
+                .attr('stroke', '#fff')
+                .attr('stroke-width', 2)
+                .on('mouseover', showNodeTooltip)
+                .on('mouseout', hideTooltip)
+                .on('click', handleNodeClick)
+                .call(d3.drag()
+                    .on('start', dragStarted)
+                    .on('drag', dragged)
+                    .on('end', dragEnded));
+
+            // Create labels
+            const labels = g.append('g')
+                .selectAll('text')
+                .data(graphData.nodes)
+                .join('text')
+                .attr('class', 'node-label')
+                .text(d => d.label.length > 10 ? d.label.substring(0, 10) + '...' : d.label);
+
+            // Update positions
+            simulation.on('tick', () => {
+                link
+                    .attr('x1', d => d.source.x)
+                    .attr('y1', d => d.source.y)
+                    .attr('x2', d => d.target.x)
+                    .attr('y2', d => d.target.y);
+
+                node
+                    .attr('cx', d => d.x)
+                    .attr('cy', d => d.y);
+
+                labels
+                    .attr('x', d => d.x)
+                    .attr('y', d => d.y + 15);
+            });
+        }
+
+        function renderNews() {
+            const container = document.getElementById('newsGrid');
+            
+            if (!newsData.length) {
+                container.innerHTML = '<div style="text-align: center; color: rgba(255,255,255,0.7);">No news articles found.</div>';
+                updatePagination();
+                return;
+            }
+
+            const startIdx = (currentPage - 1) * newsPerPage;
+            const endIdx = startIdx + newsPerPage;
+            const pageNews = newsData.slice(startIdx, endIdx);
+
+            container.innerHTML = pageNews.map(item => `
+                <div class="news-item">
+                    <h3 class="news-item-title">${item.title}</h3>
+                    <p class="news-item-preview">${item.preview}</p>
+                    <a href="${item.url}" target="_blank" rel="noopener noreferrer" class="read-full-btn">
+                        Read Full Article
+                    </a>
+                </div>
+            `).join('');
+
+            updatePagination();
+        }
+
+        function updatePagination() {
+            const totalPages = Math.ceil(newsData.length / newsPerPage);
+            
+            document.getElementById('pageInfo').textContent = 
+                newsData.length ? `Page ${currentPage} of ${totalPages}` : 'No news';
+            
+            document.getElementById('prevBtn').disabled = currentPage <= 1;
+            document.getElementById('nextBtn').disabled = currentPage >= totalPages;
+        }
+
+        function changePage(direction) {
+            const totalPages = Math.ceil(newsData.length / newsPerPage);
+            const newPage = currentPage + direction;
+            
+            if (newPage >= 1 && newPage <= totalPages) {
+                currentPage = newPage;
+                renderNews();
+            }
+        }
+
+        function getNodeColor(node) {
+            const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3'];
+            const hash = node.id.split('').reduce((a, b) => {
+                a = ((a << 5) - a) + b.charCodeAt(0);
+                return a & a;
+            }, 0);
+            return colors[Math.abs(hash) % colors.length];
+        }
+
+        function showNodeTooltip(event, d) {
+            const tooltip = d3.select('#tooltip');
+            tooltip.transition().duration(200).style('opacity', 1);
+            
+            tooltip.html(`
+                <h4>${d.label}</h4>
+                <p>Click to highlight connections</p>
+            `)
+                .style('left', (event.pageX + 10) + 'px')
+                .style('top', (event.pageY - 28) + 'px');
+        }
+
+        function showEdgeTooltip(event, d) {
+            const tooltip = d3.select('#tooltip');
+            tooltip.transition().duration(200).style('opacity', 1);
+            tooltip.html(`
+                <h4>${d.relation}</h4>
+                <p><strong>From:</strong> ${d.source.label}</p>
+                <p><strong>To:</strong> ${d.target.label}</p>
+            `)
+                .style('left', (event.pageX + 10) + 'px')
+                .style('top', (event.pageY - 28) + 'px');
+        }
+
+        function hideTooltip() {
+            d3.select('#tooltip').transition().duration(300).style('opacity', 0);
+        }
+
+        function handleNodeClick(event, d) {
+            event.stopPropagation();
+            
+            if (selectedNode && selectedNode.id === d.id) {
+                resetHighlighting();
+                return;
+            }
+
+            selectedNode = d;
+            highlightConnections(d);
+        }
+
+        function highlightConnections(selectedNode) {
+            highlightedElements.nodes.clear();
+            highlightedElements.edges.clear();
+
+            graphData.edges.forEach(edge => {
+                if (edge.source.id === selectedNode.id || edge.target.id === selectedNode.id) {
+                    highlightedElements.edges.add(edge);
+                    highlightedElements.nodes.add(edge.source.id);
+                    highlightedElements.nodes.add(edge.target.id);
+                }
+            });
+
+            applyHighlighting();
+        }
+
+        function applyHighlighting() {
+            g.selectAll('.node')
+                .classed('highlighted', d => highlightedElements.nodes.has(d.id) && (!selectedNode || d.id !== selectedNode.id))
+                .classed('selected', d => selectedNode && d.id === selectedNode.id)
+                .classed('dimmed', d => selectedNode && !highlightedElements.nodes.has(d.id));
+
+            g.selectAll('.link')
+                .classed('highlighted', d => highlightedElements.edges.has(d))
+                .classed('dimmed', d => selectedNode && !highlightedElements.edges.has(d));
+
+            g.selectAll('.node-label')
+                .classed('highlighted', d => highlightedElements.nodes.has(d.id))
+                .classed('dimmed', d => selectedNode && !highlightedElements.nodes.has(d.id));
+        }
+
+        function resetHighlighting() {
+            selectedNode = null;
+            highlightedElements.nodes.clear();
+            highlightedElements.edges.clear();
+
+            g.selectAll('.node')
+                .classed('highlighted', false)
+                .classed('selected', false)
+                .classed('dimmed', false);
+
+            g.selectAll('.link')
+                .classed('highlighted', false)
+                .classed('dimmed', false);
+
+            g.selectAll('.node-label')
+                .classed('highlighted', false)
+                .classed('dimmed', false);
+        }
+
+        // Drag functions
+        function dragStarted(event, d) {
+            if (!event.active) simulation.alphaTarget(0.3).restart();
+            d.fx = d.x;
+            d.fy = d.y;
+        }
+
+        function dragged(event, d) {
+            d.fx = event.x;
+            d.fy = event.y;
+        }
+
+        function dragEnded(event, d) {
+            if (!event.active) simulation.alphaTarget(0);
+            d.fx = null;
+            d.fy = null;
+        }
+
+        // Initialize when DOM loads
+        document.addEventListener('DOMContentLoaded', init);
+    </script>
+</body>
+</html>

triplets_index_compressed/index.faiss

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7453b3baa788f50f4e634802e04ddd4b433ea5507409fd162ae0bb68ae9c54b8
+size 8861308

triplets_index_compressed/index.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e007729981f1979ad7901e581d207af59624eec3db5e11ced5b07b3019d5072c
+size 1915352

triplets_new.db

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2db59a3c6accfca486def4ea32a1af344e04dd75769d4bb93ef7b6e609d1f3a0
+size 3751936