Flask Starter

flask-minimal/
├── app.py                 # Main Flask app (static file server)
├── api/
│   └── index.py           # API routes for ToughTongue integration
├── www/                   # Frontend assets
│   ├── index.html         # Main HTML page
│   ├── app.js             # Main application logic (Preact)
│   ├── assessment.js      # Assessment page with iframe handling
│   ├── config.js          # Configuration (scenario ID, styles)
│   ├── styles.css         # Application styling
│   └── components/
│       └── results.js     # Results display component
├── requirements.txt       # Python dependencies
└── vercel.json            # Vercel deployment config

const buildIframeUrl = () => {
  let baseUrl = `${toughTongueConfig.baseUrl}/embed/${toughTongueConfig.scenarioId}`;
  const params = new URLSearchParams();
  params.append("name", toughTongueConfig.defaultStyles.name);
  params.append("color", toughTongueConfig.defaultStyles.color);
  params.append("bg", toughTongueConfig.defaultStyles.background);
  params.append("pulse", "true");
  params.append("transcribe", "true");
  return `${baseUrl}?${params.toString()}`;
};

useEffect(() => {
  const handleMessage = async (event) => {
    const data = event.data;
    if (data && data.event) {
      switch (data.event) {
        case "onStart":
          // Session started - store session ID
          setSessionData({
            sessionId: data.sessionId,
            status: "started",
            timestamp: data.timestamp,
          });
          break;
        case "onStop":
          // Session completed - ready for analysis
          setSessionData((prev) => ({
            ...prev,
            status: "completed",
            timestamp: data.timestamp,
          }));
          break;
      }
    }
  };
  window.addEventListener("message", handleMessage);
  return () => window.removeEventListener("message", handleMessage);
}, []);

const analyzeSession = async (sessionId) => {
  const response = await fetch("/api/analyze", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ session_id: sessionId }),
  });
  return await response.json();
};

@app.route("/api/analyze", methods=["POST"])
def analyze():
    data = request.json
    response = requests.post(
        f"{API_BASE_URL}/sessions/analyze",
        json=data,
        headers={
            "Content-Type": "application/json",
            "Authorization": f"Bearer {TTAI_TOKEN}",
        },
    )
    return jsonify(response.json()), response.status_code

// Request
{ "session_id": "SESSION_ID" }

// Response
{
  "session_id": "SESSION_ID",
  "analysis": {
    "overall_score": 85,
    "strengths": ["Clear communication"],
    "areas_for_improvement": ["Response time"]
  }
}

{
  "id": "session_id",
  "scenario_id": "scenario_id",
  "transcript": "...",
  "duration": 300,
  "created_at": "2024-01-01T00:00:00Z"
}

export const toughTongueConfig = {
  scenarioId: "YOUR_NEW_SCENARIO_ID",
  // ...
};

@app.route("/api/your-endpoint", methods=["POST"])
def your_endpoint():
    data = request.json
    # Your logic here
    return jsonify({"result": "success"})

// www/components/my-component.js
import { h } from "https://unpkg.com/preact?module";

export function MyComponent({ prop }) {
  return h("div", { class: "my-component" }, prop);
}

pip install gunicorn
gunicorn app:app