app/main.py

from fastapi import FastAPI
from fastapi.responses import StreamingResponse
import asyncio
import json
import io
import base64
import matplotlib.pyplot as plt
import pandas as pd

app = FastAPI()

def build_text_stream():
    """
    Create the full text stream for the text-only endpoint.
    The text is broken into words, with each word sent as a separate event.
    """
    # Full text as provided (simulate with the complete sample, add newlines for clarity)
    text = (
        "To be an outstanding front-end engineer, you'll need a combination of technical skills, "
        "soft skills, and a passion for continuous learning. Here are the key areas to focus on: "
        "**Technical Skills:** 1. **HTML/CSS**: A solid understanding of HTML5, CSS3, and their respective best practices "
        "is essential for building robust and maintainable front-end applications. 2. **JavaScript**: Proficiency in JavaScript, "
        "including its various frameworks and libraries such as React, Angular, or Vue.js, is crucial for creating dynamic and interactive user interfaces. "
        "3. **Front-end frameworks and libraries**: Familiarity with popular front-end frameworks and libraries like Bootstrap, Material-UI, or Tailwind CSS "
        "can help you build responsive and visually appealing interfaces. 4. **State management**: Understanding state management techniques, such as Redux or MobX, "
        "is essential for managing complex application state and ensuring a seamless user experience. 5. **Performance optimization**: Knowledge of performance optimization techniques, "
        "including code splitting, lazy loading, and caching, is vital for delivering fast and efficient applications. 6. **Accessibility**: Understanding web accessibility guidelines and "
        "implementing them in your code is crucial for ensuring that your application is usable by everyone, regardless of abilities. 7. **Version control**: Familiarity with version control systems like Git "
        "is essential for managing code changes, collaborating with team members, and maintaining a clean and organized codebase. "
        "**Soft Skills:** 1. **Communication**: Effective communication is critical for collaborating with designers, back-end engineers, and other stakeholders to ensure that everyone is on the same page. "
        "2. **Problem-solving**: Strong problem-solving skills are essential for debugging complex issues, identifying root causes, and implementing effective solutions. "
        "3. **Adaptability**: The ability to adapt to changing requirements, new technologies, and evolving project needs is crucial for staying ahead of the curve and delivering high-quality results. "
        "4. **Time management**: Effective time management is essential for meeting deadlines, prioritizing tasks, and delivering projects on time. "
        "5. **Continuous learning**: A passion for continuous learning is vital for staying up-to-date with the latest front-end technologies, frameworks, and best practices. "
        "**Best Practices:** 1. **Write clean and maintainable code**: Follow coding standards, use meaningful variable names, and keep your code organized and modular. "
        "2. **Use version control**: Use Git or other version control systems to manage code changes, collaborate with team members, and maintain a clean and organized codebase. "
        "3. **Test and debug**: Write unit tests, integration tests, and end-to-end tests to ensure that your code is working as expected and catch bugs early. "
        "4. **Follow accessibility guidelines**: Implement web accessibility guidelines to ensure that your application is usable by everyone, regardless of abilities. "
        "5. **Stay up-to-date with industry trends**: Participate in online communities, attend conferences, and read industry blogs to stay informed about the latest front-end technologies and best practices. "
        "Examples of Outstanding Front-end Engineers: * **Linus Borg**: A renowned front-end engineer and speaker, known for his expertise in React, Redux, and performance optimization. "
        "* **Addy Osmani**: A Google developer advocate and front-end engineer, recognized for his work on web performance, accessibility, and modern web development. "
        "* **Max Stoiber**: A front-end engineer and speaker, known for his expertise in React, Redux, and state management. "
        "By focusing on these technical skills, soft skills, and best practices, you can become an outstanding front-end engineer and deliver high-quality applications that meet the needs of your users."
    )
    # Break the text into individual words and newlines (if desired, you can also add empty lines as in your sample)
    return text.split(" ")

async def text_stream_generator():
    """
    Generator that streams the complete text word by word.
    """
    words = build_text_stream()
    for word in words:
        yield f"data: {word}\n\n"
        await asyncio.sleep(0.2)  # Adjust the delay as needed

@app.post("/v1/test_text")
async def test_text():
    return StreamingResponse(text_stream_generator(), media_type="text/event-stream")

def generate_chart():
    """
    Generate a Base64-encoded bar chart.
    """
    data = {
        "territory": ["EMEA", "NA", "APAC", "Japan"],
        "total_sales": [4979272.41, 3852061.39, 746121.83, 455173.22]
    }
    df = pd.DataFrame(data)

    plt.figure(figsize=(6, 4))
    plt.bar(df["territory"], df["total_sales"], color=["blue", "green", "red", "orange"])
    plt.xlabel("Market Territory")
    plt.ylabel("Total Sales")
    plt.title("Total Sales by Market Territory")

    img_buffer = io.BytesIO()
    plt.savefig(img_buffer, format="png")
    plt.close()

    img_buffer.seek(0)
    return base64.b64encode(img_buffer.getvalue()).decode("utf-8")

async def chart_text_generator():
    """
    Generator that streams both a Base64-encoded chart and text word by word.
    """
    # Prepare chart data with extra configuration if needed
    chart_payload = {
        "chartType": "BarChart",
        "data": [
            {"territory": "EMEA", "total_sales": 4979272.41},
            {"territory": "NA", "total_sales": 3852061.39},
            {"territory": "APAC", "total_sales": 746121.83},
            {"territory": "Japan", "total_sales": 455173.22}
        ],
        "config": {
            "xKey": "territory",
            "xAxisLabel": "Market Territory",
            "yAxisLabel": "Total Sales",
            "yAxis": {
                "label": {"value": "Total Sales", "angle": -90, "position": "insideLeft", "offset": -60, "dy": 10},
                "tick": {"fontSize": 12},
                "padding": {"top": 10, "bottom": 10}
            },
            "series": [
                {"dataKey": "total_sales", "color": "#8884d8", "name": "Total Sales"}
            ],
            "dataPointCount": 4,
            "tooltipFormatterType": "usd",
            "tooltipLabelFormatterType": None,
            "yAxisTickFormatterType": "shortNumber",
            "margin": {"top": 20, "right": 30, "left": 60, "bottom": 60}
        },
        "chartTitle": "Total Sales by Market Territory",
        "chartImage": generate_chart()
    }
    
    # First send the complete chart JSON as one event
    yield f"data: {json.dumps(chart_payload)}\n\n"
    await asyncio.sleep(1)  # Brief pause before streaming the text

    # Now stream the text details word-by-word
    full_text = (
        "The current sales data for different regions is as follows: "
        "EMEA (Europe, Middle East, and Africa): $4,979,272.41, "
        "NA (North America): $3,852,061.39, "
        "APAC (Asia Pacific): $746,121.83, "
        "and Japan: $455,173.22. "
        "These figures represent the total sales for each region, providing a snapshot of the current sales performance across different geographic areas."
    )
    words = full_text.split(" ")
    for word in words:
        yield f"data: {word}\n\n"
        await asyncio.sleep(0.2)

@app.post("/v1/test_chart")
async def test_chart():
    return StreamingResponse(chart_text_generator(), media_type="text/event-stream")