Use this file to discover all available pages before exploring further.
The CivicHacks demo uses Gradio to create a polished web interface. You can customize the theme, colors, layout, and components to match your project’s branding.
The dynamic header updates when users switch tracks:
def build_header_html(track_name): """Build the header HTML for a given track.""" desc = TRACK_DESCRIPTIONS.get(track_name, "") return f""" <div class="header"> <h1>🏛️ CivicHacks AI Assistant</h1> <h3>{track_name}</h3> <p>{desc}<br> Powered by <strong>open source AI</strong> running locally on <strong>{HOSTNAME}</strong><br> <em>Started: {STARTED_AT}</em> — no cloud, no cost, no data leaving this machine.</p> </div> """
The build_header_html function is at line 130-141 in scripts/demo_step3_app.py.
Update the descriptions shown when users switch tracks:
scripts/demo_step3_app.py
TRACK_DESCRIPTIONS = { "🌿 EcoHack — Boston Environment": "Explore Boston's environmental quality, climate risks, and environmental justice data.", "🏙️ CityHack — Boston 311 Services": "Analyze Boston 311 service requests, response times, and equity in city services.", "📚 EduHack — Boston Public Schools": "Investigate achievement gaps, transportation barriers, and equity in Boston schools.", "⚖️ JusticeHack — MA Criminal Justice": "Examine pretrial detention, reentry programs, and policing patterns in Massachusetts.",}
Replace with your own descriptions to match your data and use case.
The clickable example questions update dynamically per track:
EXAMPLE_QUESTIONS = { "🌿 EcoHack — Boston Environment": [ "Which neighborhoods face the worst environmental injustice?", "What are the biggest climate threats to Boston?", "How does tree canopy coverage affect neighborhood temperatures?", ],}
Update the EXAMPLE_QUESTIONS dictionary at line 63-84 in scripts/demo_step3_app.py.
gr.HTML(f"""<div class="footer"> <strong>Stack:</strong> Ollama + LlamaIndex + Gradio · <strong>Model:</strong> Llama 3.1 8B · <strong>Host:</strong> {HOSTNAME} · <strong>Data Privacy:</strong> 100% local · <strong>Cost:</strong> per-query estimate shown in each response<br> Built for <strong>CivicHacks 2026</strong> at Boston University · Templates at <a href="https://aitemplates.io" target="_blank">aitemplates.io</a></div>""")
The footer HTML is at line 252-261 in scripts/demo_step3_app.py.
chatbot = gr.Chatbot( height=600, # Increase from 420 to 600)
2
Adjust input/button ratio
with gr.Row(): question_input = gr.Textbox( scale=5, # Changed from 4 (wider input) ) submit_btn = gr.Button( "Ask", variant="primary", scale=1, # Button stays small )
3
Reorder components
Move the track selector below the chat:
with gr.Blocks(title="CivicHacks AI Assistant") as app: header = gr.HTML(build_header_html(default_track)) chatbot = gr.Chatbot(...) # Move track selector here (after chat) with gr.Row(): track_selector = gr.Dropdown(...)