Spaces:
Sleeping
Sleeping
| """ | |
| UI Formatters - HTML and Markdown visualization generators for enhanced output | |
| """ | |
| from typing import Dict | |
| def create_sentiment_chart_html(sentiment_data: Dict[str, int]) -> str: | |
| """Create minimal HTML sentiment visualization""" | |
| positive = sentiment_data.get("positive", 0) | |
| neutral = sentiment_data.get("neutral", 0) | |
| negative = sentiment_data.get("negative", 0) | |
| # Determine dominant sentiment | |
| sentiments = [("positive", positive), ("neutral", neutral), ("negative", negative)] | |
| dominant = max(sentiments, key=lambda x: x[1])[0] | |
| return f""" | |
| <div style="margin: 1.5rem 0;"> | |
| <h3 style="font-size: 1.2rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem;"> | |
| Sentiment Distribution | |
| </h3> | |
| <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1rem;"> | |
| <div style="background: {'#f0f0f0' if dominant == 'positive' else '#f8fafc'}; | |
| border-radius: 6px; padding: 1rem; color: #374151; | |
| text-align: center; border: 1px solid #e5e7eb;"> | |
| <div style="font-size: 1.75rem; font-weight: 600; margin-bottom: 0.25rem;">{positive}%</div> | |
| <div style="font-size: 0.85rem; font-weight: 500;">Positive</div> | |
| </div> | |
| <div style="background: {'#f0f0f0' if dominant == 'neutral' else '#f8fafc'}; | |
| border-radius: 6px; padding: 1rem; color: #374151; | |
| text-align: center; border: 1px solid #e5e7eb;"> | |
| <div style="font-size: 1.75rem; font-weight: 600; margin-bottom: 0.25rem;">{neutral}%</div> | |
| <div style="font-size: 0.85rem; font-weight: 500;">Neutral</div> | |
| </div> | |
| <div style="background: {'#f0f0f0' if dominant == 'negative' else '#f8fafc'}; | |
| border-radius: 6px; padding: 1rem; color: #374151; | |
| text-align: center; border: 1px solid #e5e7eb;"> | |
| <div style="font-size: 1.75rem; font-weight: 600; margin-bottom: 0.25rem;">{negative}%</div> | |
| <div style="font-size: 0.85rem; font-weight: 500;">Negative</div> | |
| </div> | |
| </div> | |
| <!-- Progress bars for visual representation --> | |
| <div style="margin-top: 1rem;"> | |
| <div style="margin-bottom: 0.75rem;"> | |
| <div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem; font-size: 0.85rem; color: #6b7280;"> | |
| <span style="font-weight: 500;">Positive</span> | |
| <span style="font-weight: 500;">{positive}%</span> | |
| </div> | |
| <div style="background: #e5e7eb; border-radius: 3px; height: 6px;"> | |
| <div style="background: #6b7280; height: 100%; width: {positive}%; border-radius: 3px;"></div> | |
| </div> | |
| </div> | |
| <div style="margin-bottom: 0.75rem;"> | |
| <div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem; font-size: 0.85rem; color: #6b7280;"> | |
| <span style="font-weight: 500;">Neutral</span> | |
| <span style="font-weight: 500;">{neutral}%</span> | |
| </div> | |
| <div style="background: #e5e7eb; border-radius: 3px; height: 6px;"> | |
| <div style="background: #6b7280; height: 100%; width: {neutral}%; border-radius: 3px;"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem; font-size: 0.85rem; color: #6b7280;"> | |
| <span style="font-weight: 500;">Negative</span> | |
| <span style="font-weight: 500;">{negative}%</span> | |
| </div> | |
| <div style="background: #e5e7eb; border-radius: 3px; height: 6px;"> | |
| <div style="background: #6b7280; height: 100%; width: {negative}%; border-radius: 3px;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| """ | |
| def create_pricing_tiers_html(tiers: Dict[str, float]) -> str: | |
| """Create minimal HTML pricing tier visualization""" | |
| html = """ | |
| <div style="margin: 1.5rem 0;"> | |
| <h3 style="font-size: 1.2rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem;"> | |
| Pricing Tier Comparison | |
| </h3> | |
| <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem;"> | |
| """ | |
| tier_info = { | |
| "budget": { | |
| "name": "Budget", | |
| "color": "#9ca3af", | |
| "bg": "#f9fafb" | |
| }, | |
| "standard": { | |
| "name": "Standard", | |
| "color": "#9ca3af", | |
| "bg": "#f9fafb" | |
| }, | |
| "premium": { | |
| "name": "Premium", | |
| "color": "#9ca3af", | |
| "bg": "#f9fafb" | |
| } | |
| } | |
| # Find highest price to highlight | |
| max_price = max(tiers.values()) if tiers else 0 | |
| for tier, price in tiers.items(): | |
| info = tier_info.get(tier, { | |
| "name": tier.title(), | |
| "color": "#9ca3af", | |
| "bg": "#f9fafb" | |
| }) | |
| is_best = price == max_price | |
| highlight = "2px solid #9ca3af" if is_best else "1px solid #e5e7eb" | |
| html += f""" | |
| <div style="background: {info['bg']}; border: {highlight}; border-radius: 6px; padding: 1rem; | |
| text-align: center;"> | |
| <div style="font-size: 0.8rem; color: #4b5563; margin-bottom: 0.5rem; font-weight: 500; text-transform: uppercase;"> | |
| {info['name']} | |
| {'<span style="margin-left: 0.25rem; background: #e5e7eb; color: #4b5563; padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.65rem;">RECOMMENDED</span>' if is_best else ''} | |
| </div> | |
| <div style="background: #f3f4f6; color: #1f2937; border-radius: 4px; padding: 0.75rem; margin-bottom: 0.5rem;"> | |
| <div style="font-size: 1.5rem; font-weight: 600;">${price:.2f}</div> | |
| </div> | |
| </div> | |
| """ | |
| html += """ | |
| </div> | |
| </div> | |
| """ | |
| return html | |