Update app.py

app.py

@@ -8,26 +8,145 @@ import spacy
 from spacy import displacy
 from spacy.tokens import Span
 import random
-from tqdm import tqdm
+import os
+import pickle
 
 # Constants
 TITLE = "🌐 GraphMind: Phi-3 Instruct Graph Explorer"
 SUBTITLE = "✨ Extract and visualize knowledge graphs from any text in multiple languages"
 
-# Custom CSS for styling
+# Enhanced Custom CSS for styling with improved visuals
 CUSTOM_CSS = """
 .gradio-container {
     font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(to bottom, #f9fafb, #f3f4f6);
 }
 .gr-button-primary {
-    background-color: #6366f1 !important;
+    background-color: #4f46e5 !important;
+    border: none !important;
+    color: white !important;
+    border-radius: 8px !important;
+}
+.gr-button-primary:hover {
+    background-color: #4338ca !important;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 .gr-button-secondary {
-    border-color: #6366f1 !important;
-    color: #6366f1 !important;
+    border-color: #4f46e5 !important;
+    color: #4f46e5 !important;
+    border-radius: 8px !important;
+}
+.gr-button-secondary:hover {
+    background-color: #eef2ff !important;
+    transform: translateY(-1px);
+}
+.gr-box, .gr-input, .gr-textarea, .gr-dropdown {
+    border-radius: 8px !important;
+    border: 1px solid #e5e7eb !important;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+}
+.gr-padded {
+    padding: 16px !important;
+}
+.gr-form {
+    border: none !important;
+    background: transparent !important;
+}
+.gr-input:focus, .gr-textarea:focus, .gr-dropdown:focus {
+    border-color: #4f46e5 !important;
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2) !important;
+}
+.gr-panel {
+    border-radius: 12px !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    background-color: white !important;
+}
+.gr-heading {
+    font-weight: 700 !important;
+    color: #111827 !important;
+}
+.gr-examples-table {
+    border-radius: 8px !important;
+    overflow: hidden !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+}
+.gr-prose p {
+    margin-bottom: 0.75rem !important;
+    color: #4b5563 !important;
+}
+.gr-prose h1, .gr-prose h2, .gr-prose h3 {
+    font-weight: 700 !important;
+    color: #111827 !important;
+}
+.gr-tab {
+    border-radius: 8px 8px 0 0 !important;
+}
+.gr-tab-selected {
+    border-color: #4f46e5 !important;
+    color: #4f46e5 !important;
+    font-weight: 600 !important;
+}
+.visualization-container {
+    min-height: 600px !important;
+    margin-top: 2rem !important;
+    margin-bottom: 2rem !important;
+    border-radius: 16px !important;
+    overflow: hidden !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
+}
+.sidebar-container {
+    background-color: white !important;
+    border-radius: 12px !important;
+    padding: 16px !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+}
+.app-title {
+    background: linear-gradient(90deg, #4f46e5, #8b5cf6) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    font-weight: 800 !important;
+    font-size: 2.25rem !important;
+    margin-bottom: 0.5rem !important;
+}
+.app-subtitle {
+    color: #6b7280 !important;
+    font-size: 1.25rem !important;
+    margin-bottom: 2rem !important;
+}
+.graph-iframe iframe {
+    width: 100% !important;
+    height: 700px !important;
+    border-radius: 12px !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+}
+.results-container {
+    background-color: #f8fafc !important;
+    padding: 20px !important;
+    border-radius: 12px !important;
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+    border: 1px solid #e2e8f0 !important;
+}
+.language-badge {
+    display: inline-block !important;
+    background-color: #4f46e5 !important;
+    color: white !important;
+    padding: 4px 12px !important;
+    border-radius: 16px !important;
+    font-weight: 600 !important;
+    font-size: 0.875rem !important;
+    margin-right: 8px !important;
 }
 """
 
+# Cache directory and file paths
+CACHE_DIR = "cache"
+EXAMPLE_CACHE_FILE = os.path.join(CACHE_DIR, "first_example_cache.pkl")
+
+# Create cache directory if it doesn't exist
+os.makedirs(CACHE_DIR, exist_ok=True)
+
 # Color utilities
 def get_random_light_color():
     r = random.randint(140, 255)
@@ -107,7 +226,13 @@ def create_custom_entity_viz(data, full_text):
     }
 
     html = displacy.render(doc, style="span", options=options)
-    return html
+    # Add custom styling to the entity visualization
+    styled_html = f"""
+    <div style="padding: 20px; border-radius: 12px; background-color: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
+        {html}
+    </div>
+    """
+    return styled_html
 
 def create_graph(json_data):
     G = nx.Graph()
@@ -122,8 +247,8 @@ def create_graph(json_data):
 
     # Create network visualization
     nt = Network(
-        width="720px",
-        height="600px",
+        width="100%",
+        height="700px",
         directed=True,
         notebook=False,
         bgcolor="#f8fafc", 
@@ -159,7 +284,7 @@ def create_graph(json_data):
     html = nt.generate_html()
     html = html.replace("'", '"')
 
-    return f"""<iframe style="width: 100%; height: 620px; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);" 
+    return f"""<iframe style="width: 100%; height: 700px; margin: 0 auto; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);" 
         name="result" allow="midi; geolocation; microphone; camera; display-capture; encrypted-media;" 
         sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups 
         allow-top-navigation-by-user-activation allow-downloads" allowfullscreen="" 
@@ -169,6 +294,22 @@ def process_and_visualize(text, model, progress=gr.Progress()):
     if not text or not model:
         raise gr.Error("⚠️ Both text and model must be provided.")
     
+    # Check if we're processing the first example for caching
+    is_first_example = text == EXAMPLES[0][0]
+    
+    # Try to load from cache if it's the first example
+    if is_first_example and os.path.exists(EXAMPLE_CACHE_FILE):
+        try:
+            progress(0.3, desc="Loading from cache...")
+            with open(EXAMPLE_CACHE_FILE, 'rb') as f:
+                cache_data = pickle.load(f)
+                
+            progress(1.0, desc="Loaded from cache!")
+            return cache_data["graph_html"], cache_data["entities_viz"], cache_data["json_data"], cache_data["stats"]
+        except Exception as e:
+            print(f"Cache loading error: {str(e)}")
+            # Continue with normal processing if cache fails
+    
     progress(0, desc="Starting extraction...")
     json_data = extract(text, model)
     
@@ -182,6 +323,20 @@ def process_and_visualize(text, model, progress=gr.Progress()):
     edge_count = len(json_data["edges"])
     stats = f"📊 Extracted {node_count} entities and {edge_count} relationships"
     
+    # Save to cache if it's the first example
+    if is_first_example:
+        try:
+            cache_data = {
+                "graph_html": graph_html,
+                "entities_viz": entities_viz,
+                "json_data": json_data,
+                "stats": stats
+            }
+            with open(EXAMPLE_CACHE_FILE, 'wb') as f:
+                pickle.dump(cache_data, f)
+        except Exception as e:
+            print(f"Cache saving error: {str(e)}")
+    
     progress(1.0, desc="Complete!")
     return graph_html, entities_viz, json_data, stats
 
@@ -206,56 +361,116 @@ EXAMPLES = [
     평단의 호평을 받았다.""")]
 ]
 
+# Function to preprocess the first example when the app starts
+def generate_first_example_cache():
+    """Generate cache for the first example if it doesn't exist"""
+    if not os.path.exists(EXAMPLE_CACHE_FILE):
+        print("Generating cache for first example...")
+        try:
+            text = EXAMPLES[0][0]
+            model = MODEL_LIST[0] if MODEL_LIST else None
+            
+            if model:
+                # Extract data
+                json_data = extract(text, model)
+                entities_viz = create_custom_entity_viz(json_data, text)
+                graph_html = create_graph(json_data)
+                
+                node_count = len(json_data["nodes"])
+                edge_count = len(json_data["edges"])
+                stats = f"📊 Extracted {node_count} entities and {edge_count} relationships"
+                
+                # Save to cache
+                cache_data = {
+                    "graph_html": graph_html,
+                    "entities_viz": entities_viz,
+                    "json_data": json_data,
+                    "stats": stats
+                }
+                with open(EXAMPLE_CACHE_FILE, 'wb') as f:
+                    pickle.dump(cache_data, f)
+                
+                print("First example cache generated successfully")
+                return cache_data
+        except Exception as e:
+            print(f"Error generating first example cache: {str(e)}")
+    else:
+        print("First example cache already exists")
+        try:
+            with open(EXAMPLE_CACHE_FILE, 'rb') as f:
+                return pickle.load(f)
+        except Exception as e:
+            print(f"Error loading existing cache: {str(e)}")
+    
+    return None
+
 def create_ui():
+    # Try to generate/load the first example cache
+    first_example_cache = generate_first_example_cache()
+    
     with gr.Blocks(css=CUSTOM_CSS, title=TITLE) as demo:
-        # Header
-        gr.Markdown(f"# {TITLE}")
-        gr.Markdown(f"{SUBTITLE}")
+        # Header with enhanced styling
+        with gr.Row(elem_classes=["header-container"]):
+            with gr.Column():
+                gr.Markdown(f"<h1 class='app-title'>{TITLE}</h1>")
+                gr.Markdown(f"<p class='app-subtitle'>{SUBTITLE}</p>")
+                
+                with gr.Row():
+                    gr.Markdown("<span class='language-badge'>English</span><span class='language-badge'>Korean</span><span class='language-badge'>+ More</span>")
         
+        # Main content area - redesigned layout
         with gr.Row():
-            gr.Markdown("🌍 **Multilingual Support Available** 🔤")
-            
-        # Main interface
-        with gr.Row():
-            # Input column
-            with gr.Column(scale=1):
+            # Left panel - Input controls
+            with gr.Column(scale=1, elem_classes=["sidebar-container"]):
                 input_model = gr.Dropdown(
                     MODEL_LIST, 
                     label="🤖 Select Model",
                     info="Choose a model to process your text",
-                    value=MODEL_LIST[0] if MODEL_LIST else None
+                    value=MODEL_LIST[0] if MODEL_LIST else None,
+                    elem_classes=["control-item"]
                 )
                 
                 input_text = gr.TextArea(
                     label="📝 Input Text", 
                     info="Enter text in any language to extract a knowledge graph",
                     placeholder="Enter text here...",
-                    lines=10
+                    lines=8,
+                    value=EXAMPLES[0][0],  # Pre-fill with first example
+                    elem_classes=["control-item"]
                 )
                 
                 with gr.Row():
                     submit_button = gr.Button("🚀 Extract & Visualize", variant="primary", scale=2)
                     clear_button = gr.Button("🔄 Clear", variant="secondary", scale=1)
                 
+                # Statistics will appear here
+                stats_output = gr.Markdown("", label="🔍 Analysis Results", elem_classes=["results-container"])
+            
+            # Right panel - Examples moved to right side
+            with gr.Column(scale=1, elem_classes=["sidebar-container"]):
+                gr.Markdown("<h3>📚 Example Texts</h3>")
                 gr.Examples(
                     examples=EXAMPLES,
                     inputs=input_text,
-                    label="📚 Example Texts (English & Korean)"
+                    label="",
+                    elem_classes=["examples-panel"]
                 )
                 
-                stats_output = gr.Markdown("", label="🔍 Analysis Results")
-                
-            # Output column
-            with gr.Column(scale=1):
-                with gr.Tab("🧩 Knowledge Graph"):
-                    output_graph = gr.HTML(label="")
-                
-                with gr.Tab("🏷️ Entities"):
-                    output_entity_viz = gr.HTML(label="")
-                    
-                with gr.Tab("📊 JSON Data"):
+                # JSON output moved to right side as well
+                with gr.Accordion("📊 JSON Data", open=False):
                     output_json = gr.JSON(label="")
+        
+        # Full width visualization area at the bottom
+        with gr.Row(elem_classes=["visualization-container"]):
+            with gr.Column():
+                # Tab container for visualizations
+                with gr.Tabs():
+                    with gr.Tab("🧩 Knowledge Graph"):
+                        output_graph = gr.HTML(label="", elem_classes=["graph-iframe"])
                     
+                    with gr.Tab("🏷️ Entity Recognition"):
+                        output_entity_viz = gr.HTML(label="")
+        
         # Functionality
         submit_button.click(
             fn=process_and_visualize, 
@@ -269,10 +484,25 @@ def create_ui():
             outputs=[output_graph, output_entity_viz, output_json, stats_output]
         )
         
+        # Set initial values from cache if available
+        if first_example_cache:
+            # Use this to set initial values when the app loads
+            demo.load(
+                lambda: [
+                    first_example_cache["graph_html"], 
+                    first_example_cache["entities_viz"], 
+                    first_example_cache["json_data"], 
+                    first_example_cache["stats"]
+                ],
+                inputs=None,
+                outputs=[output_graph, output_entity_viz, output_json, stats_output]
+            )
+        
         # Footer
-        gr.Markdown("---")
-        gr.Markdown("📋 **Instructions:** Enter text in any language, select a model, and click 'Extract & Visualize' to generate a knowledge graph.")
-        gr.Markdown("🛠️ Powered by Phi-3 Instruct Graph | Emergent Methods")
+        with gr.Row(elem_classes=["footer-container"]):
+            gr.Markdown("---")
+            gr.Markdown("📋 **Instructions:** Enter text in any language, select a model, and click 'Extract & Visualize' to generate a knowledge graph.")
+            gr.Markdown("🛠️ Powered by Phi-3 Instruct Graph | Emergent Methods")
         
     return demo