File size: 4,539 Bytes
4361efa
 
 
5c3d06f
4361efa
 
3fa6382
4361efa
 
3fa6382
 
 
4361efa
 
 
 
3fa6382
4361efa
3fa6382
09ad861
4361efa
 
 
6888495
4361efa
 
5c3d06f
 
 
 
 
4361efa
 
09ad861
6888495
4361efa
 
 
3fa6382
62a6c1f
b019e35
4361efa
 
3fa6382
 
 
 
4361efa
3fa6382
4361efa
 
 
 
 
 
 
 
 
 
3fa6382
5c3d06f
 
4361efa
 
3fa6382
4361efa
 
3fa6382
 
 
 
 
b019e35
3fa6382
 
 
 
 
 
 
b019e35
 
 
 
3fa6382
b019e35
 
b741822
b019e35
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3fa6382
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4361efa
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import gradio as gr
from src.logic import generate_answer, rebuild


def create_ui():
    with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue"), title="MindMesh") as demo:
        # --- Header ---
        gr.Markdown(
            """
            <div style='text-align:center; margin-bottom: 1rem;'>
                <h1>🧠 <b>MindMesh — Cross-Domain Reasoning Assistant</b></h1>
                <p>Ask a question and get synthesized insights from science, philosophy, business, and beyond.</p>
            </div>
            """
        )

        # --- Main Input Section ---
        with gr.Row(equal_height=False):
            # Left column - Question + Buttons
            with gr.Column(scale=2.5):  # slightly reduced width
                q = gr.Textbox(
                    label="Your Question",
                    placeholder="Write your prompt here...",
                    lines=1,
                    show_label=True,
                )

                with gr.Row():
                    generate_btn = gr.Button("⚙️ Generate Insight", variant="primary")
                    clear_btn = gr.Button("🧹 Clear", variant="secondary")

                status = gr.Markdown(value="", visible=True)

            # Right column - Answer Mode (expanded slightly)
            with gr.Column(scale=1.2, min_width=360):
                mode = gr.Radio(
                    ["Quick Summary (Offline)", "LLM Precision (Groq Llama-3.1 70B)"],
                    value="Quick Summary (Offline)",
                    label="Answer Mode",
                    show_label=True,
                    elem_id="answer-mode",
                )

        # --- Output section ---
        gr.Markdown("<br>")
        gr.Markdown("### 🧭 Synthesized Insight")
        out = gr.Markdown(elem_id="output-box")

        # --- Example prompts ---
        examples = gr.Examples(
            examples=[
                ["What can startups learn from the Industrial Revolution?"],
                ["How do Stoic principles guide modern leadership?"],
                ["What parallels exist between habit loops and innovation?"],
                ["How does color psychology affect business branding?"]
            ],
            inputs=q
        )

        # --- Button logic ---
        generate_btn.click(fn=lambda x, m: generate_answer(x, m), inputs=[q, mode], outputs=out)
        clear_btn.click(lambda: ("", "", ""), outputs=[q, out, status])
        q.submit(fn=lambda x, m: generate_answer(x, m), inputs=[q, mode], outputs=out)

        # --- Custom Styling ---
        gr.HTML("""
        <style>
        /* Expand the main layout width */
        .gradio-container {
            max-width: 1250px !important;
            margin: auto !important;
        }

        /* Input text area */
        textarea {
            font-size: 15px !important;
            border-radius: 8px !important;
        }

        /* Buttons */
        button { 
            font-size: 14px !important; 
            font-weight: 600; 
            border-radius: 8px !important; 
            height: 45px !important;
        }

        /* Answer Mode styling */
        #answer-mode .wrap {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            width: 100% !important;
        }

        #answer-mode label {
            display: block !important;
            width: 100% !important;
            padding: 10px 14px !important;
            border-radius: 8px !important;
            text-align: left !important;
            font-size: 14px !important;
            font-weight: 500;
        }

        #answer-mode input[type="radio"] {
            width: 16px !important;
            height: 16px !important;
        }

        #answer-mode .item {
            width: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
        }

        /* Output box styling */
        #output-box {
            border: 1px solid rgba(255, 255, 255, 0.15);
            background-color: rgba(255, 255, 255, 0.04);
            border-radius: 10px;
            padding: 18px;
            margin-top: 10px;
            min-height: 150px;
            max-height: 400px;
            overflow-y: auto;
            font-size: 15px !important;
        }

        /* Examples */
        .examples {
            margin-top: 1rem !important;
        }

        </style>
        """)

    return demo