/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { marked } from "https://esm.sh/marked@4.3.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; function ConfirmationModal({ isOpen, onClose }) { if (!isOpen) return null; return (

Email Sent Successfully

Your training plan has been emailed successfully.

); } function App() { const [sport, setSport] = useState(""); const [skillLevel, setSkillLevel] = useState(""); const [ageGroup, setAgeGroup] = useState(""); const [regenerateKey, setRegenerateKey] = useState(0); const [selectedSkills, setSelectedSkills] = useState([]); const [groupSize, setGroupSize] = useState(""); const [trainingPlan, setTrainingPlan] = useState(""); const [sessionDuration, setSessionDuration] = useState(""); const [loading, setLoading] = useState(false); const [showSpinner, setShowSpinner] = useState(false); const [annotations, setAnnotations] = useState({}); const [showEmailInput, setShowEmailInput] = useState(false); const [emailAddress, setEmailAddress] = useState(""); const [sharing, setSharing] = useState(false); const [showConfirmationModal, setShowConfirmationModal] = useState(false); const [youtubeLinks, setYoutubeLinks] = useState([]); useEffect(() => { let timer; if (loading) { timer = setTimeout(() => setShowSpinner(true), 2000); } else { setShowSpinner(false); } return () => clearTimeout(timer); }, [loading]); const handleSubmit = async (e, isRegenerate = false) => { if (e) e.preventDefault(); setLoading(true); setTrainingPlan(""); setYoutubeLinks([]); const response = await fetch("/generate-training", { method: "POST", headers: { "Content-Type": "application/json", "Regenerate-Key": regenerateKey.toString() }, body: JSON.stringify({ sport, skillLevel, ageGroup, groupSize, selectedSkills, sessionDuration }), }); const data = await response.json(); setTrainingPlan(data.trainingPlan); setYoutubeLinks(data.youtubeLinks || []); setLoading(false); }; const handleRegenerate = () => { setRegenerateKey(prevKey => prevKey + 1); setLoading(true); handleSubmit(null, true); }; const handleShare = () => { setShowEmailInput(true); }; const sendEmail = async (e) => { e.preventDefault(); setSharing(true); try { const response = await fetch("/share-training", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ trainingPlan, emailAddress, youtubeLinks, }), }); const result = await response.json(); if (result.success) { setShowConfirmationModal(true); } else { throw new Error("Failed to share training plan"); } } catch (error) { alert("Failed to share training plan. Please try again."); } setSharing(false); setShowEmailInput(false); setEmailAddress(""); }; const sportSkills = { "Tennis": [ "Forehand", "Backhand", "Serve", "Volley", "Footwork", "Net play", "Lob", "Slice", "Drop shot", "Return of serve", ], "Basketball": [ "Dribbling", "Shooting", "Passing", "Layups", "Rebounding", "Defense", "Pick and roll", "Free throws", "Post moves", "Fast break", ], "Soccer": [ "Dribbling", "Passing", "Shooting", "Ball control", "Heading", "Tackling", "Goalkeeping", "Set pieces", "Positioning", "First touch", ], "Australian Rules Football": [ "Kicking", "Handball", "Marking", "Tackling", "Bouncing", "Ruck work", "Positioning", "Shepherding", "Spoiling", "Goal kicking", ], "Golf": [ "Driving", "Iron play", "Putting", "Chipping", "Pitching", "Bunker shots", "Course management", "Grip", "Stance", "Swing mechanics", ], "Cricket": [ "Batting", "Bowling", "Fielding", "Wicket-keeping", "Running between wickets", "Spin bowling", "Fast bowling", "Catching", "Throwing", "Shot selection", ], "Futsal": [ "Close ball control", "Quick passing", "Wall pass", "Shooting in tight spaces", "Receiving under pressure", "Futsal-specific dribbling", "One-touch play", "Defensive positioning", "Goalkeeper distribution", "Pivot play", ], }; const handleSkillSelection = (skill) => { if (selectedSkills.includes(skill)) { setSelectedSkills(selectedSkills.filter(s => s !== skill)); } else if (selectedSkills.length < 3) { setSelectedSkills([...selectedSkills, skill]); } }; const handleAnnotation = (drillId, annotation) => { setAnnotations(prev => ({ ...prev, [drillId]: annotation, })); }; const renderTrainingPlan = () => { const parser = new DOMParser(); const doc = parser.parseFromString(trainingPlan, "text/html"); const drills = doc.querySelectorAll("h3, h4"); drills.forEach((drill, index) => { const annotationBox = createAnnotationBox(index, drill.textContent); drill.insertAdjacentElement("afterend", annotationBox); }); return doc.body.innerHTML; }; const createAnnotationBox = (drillId, drillName) => { const div = document.createElement("div"); div.className = "annotation-box"; div.innerHTML = `

Coach's Annotation

`; return div; }; useEffect(() => { const textareas = document.querySelectorAll(".annotation-box textarea"); textareas.forEach(textarea => { textarea.addEventListener("input", (e) => { const drillId = e.target.getAttribute("data-drill-id"); handleAnnotation(drillId, e.target.value); }); }); }, [trainingPlan]); const handleReset = () => { setSport(""); setSkillLevel(""); setAgeGroup(""); setGroupSize(""); setSelectedSkills([]); setTrainingPlan(""); setYoutubeLinks([]); setAnnotations({}); }; return (

Coach Companion

Sport Training Planner

{showSpinner &&

} {!showSpinner && ( <> {!sport ? ( ) : !trainingPlan && !loading ? (

Select 3 skills for {sport}:

{sportSkills[sport].map(skill => ( ))}

Selected skills: {selectedSkills.length}/3

{selectedSkills.length === 3 && (

setGroupSize(e.target.value)} placeholder="Group Size" required />

)}

) : (

{trainingPlan && ( <> )}

{showEmailInput && ( )} {trainingPlan && (

)}

)} )} setShowConfirmationModal(false)} />

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } const css = ` @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap'); :root { --primary-color: #FFB3BA; --secondary-color: #BAFFC9; --tertiary-color: #BAE1FF; --background-color: #121212; --container-background: #1E1E1E; --text-color: #E0E0E0; --border-color: #2C2C2C; --input-background: #2C2C2C; --button-text: #121212; --hover-color: #FFD9B3; } body { font-family: 'Inter', sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: var(--background-color); color: var(--text-color); min-height: 100vh; } .container { max-width: 800px; margin: 0 auto; background-color: var(--container-background); padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); } header { text-align: center; margin-bottom: 40px; } h1 { font-size: 2.5em; color: var(--text-color); margin-bottom: 10px; } h2 { font-size: 1.5em; color: var(--text-color); opacity: 0.7; font-weight: 400; } form { display: flex; flex-direction: column; gap: 20px; } select, input, button { padding: 12px 16px; font-size: 16px; border: 1px solid var(--border-color); border-radius: 10px; background-color: var(--input-background); color: var(--text-color); font-family: 'Inter', sans-serif; transition: all 0.3s ease; } select:focus, input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(255, 179, 186, 0.1); } button { background-color: var(--primary-color); color: var(--button-text); cursor: pointer; font-weight: 600; border: none; transition: all 0.3s ease; } button:hover { background-color: var(--secondary-color); color: var(--button-text); transform: translateY(-2px); } button:disabled { background-color: var(--border-color); cursor: not-allowed; transform: none; } .planner-section { background-color: var(--container-background); padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); } .skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .skill-grid button { padding: 10px; background-color: var(--input-background); border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer; transition: all 0.3s; color: var(--text-color); font-weight: 400; } .skill-grid button.selected { background-color: var(--primary-color); color: var(--button-text); font-weight: 600; } .training-plan { background-color: var(--container-background); border-radius: 12px; padding: 25px; margin-top: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); } .training-plan h3 { color: var(--tertiary-color); margin-top: 25px; } .training-plan ul, .training-plan ol { padding-left: 20px; } .training-plan li { margin-bottom: 10px; } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 30px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; } .button-container { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; } .action-button { flex: 1; max-width: 200px; padding: 12px 20px; font-size: 15px; font-weight: 600; text-align: center; background-color: var(--primary-color); color: var(--button-text); border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s; } .action-button:hover { background-color: var(--hover-color); color: var(--button-text); transform: translateY(-3px); } .action-button:disabled { background-color: var(--border-color); cursor: not-allowed; transform: none; } @media (max-width: 600px) { .container, .planner-section, .training-plan { padding: 20px; } .skill-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .button-container { flex-direction: column; align-items: center; } .action-button { width: 100%; max-width: none; } } .spinner { width: 50px; height: 50px; border: 5px solid var(--input-background); border-top: 5px solid var(--secondary-color); border-radius: 50%; animation: spin 1s linear infinite; margin: 20px auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .annotation-box { margin: 10px 0; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; } .annotation-box details { background-color: var(--input-background); } .annotation-box summary { padding: 10px 15px; cursor: pointer; font-weight: 600; background-color: var(--border-color); transition: background-color 0.3s ease; } .annotation-box summary:hover { background-color: var(--input-background); } .annotation-box textarea { width: 100%; min-height: 100px; padding: 10px; border: none; background-color: var(--input-background); color: var(--text-color); border-top: 1px solid var(--border-color); resize: vertical; } .email-form { display: flex; gap: 10px; margin-top: 20px; } .email-form input[type="email"] { flex-grow: 1; } .email-form .action-button { flex-shrink: 0; } .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .modal-content { background-color: var(--container-background); padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .modal-content h2 { color: var(--tertiary-color); margin-bottom: 10px; } .modal-content p { margin-bottom: 20px; } .modal-content button { background-color: var(--primary-color); color: var(--button-text); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: 600; transition: background-color 0.3s ease; } .modal-content button:hover { background-color: var(--hover-color); } `; async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/generate-training") { const YOUTUBE_API_KEY = Deno.env.get("YOUTUBE_API_KEY2"); const useApiKey = YOUTUBE_API_KEY !== undefined && YOUTUBE_API_KEY !== ""; if (!YOUTUBE_API_KEY) { console.warn("YouTube API key (YOUTUBE_API_KEY2) is not set. Falling back to search URL method."); } const { OpenAI } = await import("https://esm.town/v/std/openai"); const regenerateKey = request.headers.get("Regenerate-Key") || "0"; const openai = new OpenAI(); const { sport, skillLevel, ageGroup, groupSize, selectedSkills, sessionDuration } = await request.json(); const prompt = `Create a comprehensive and detailed training plan for a ${sessionDuration}-minute ${sport} session focusing on the following skills: ${ selectedSkills.join(", ") }. The participants are in the age group of ${ageGroup} years, ${skillLevel} skill level, and the group size is ${groupSize}. The training plan should be highly structured, informative, and easy to follow. Format the response in markdown, including headers for each section. Include the following sections: 1. Objectives: List 3-5 specific learning objectives for the session. 2. Equipment Needed: List all necessary equipment for the session. 3. Warm-up (${Math.min(15, Math.floor(sessionDuration * 0.2))} minutes): - Include dynamic stretching exercises - Add sport-specific warm-up drills 4. Skill Focus (${Math.floor(sessionDuration * 0.5)} minutes): - Introduce or review the 3 selected skills or techniques - Provide detailed explanations and key coaching points for each skill - Include progressive drills for each skill (start simple, then increase complexity) - For each main drill or technique, include a placeholder for a video demonstration in the format: [VIDEO: Drill Name] 5. Game Situation / Scrimmage (${Math.floor(sessionDuration * 0.25)} minutes): - Design a game or scrimmage that incorporates the skills practiced - Explain any modified rules or constraints to emphasize the learned skills 6. Cool-down (${Math.min(10, Math.floor(sessionDuration * 0.1))} minutes): - Include light cardio and static stretching 7. Reflection and Feedback (${ Math.min( 5, sessionDuration - (Math.floor(sessionDuration * 0.2) + Math.floor(sessionDuration * 0.5) + Math.floor(sessionDuration * 0.25) + Math.floor(sessionDuration * 0.1)), ) } minutes): - Suggest questions for group discussion about the session - Provide tips for giving constructive feedback to participants 8. Conclusion: - Summarize the key points of the training - List 3-5 essential questions that participants should be able to answer after the session - Emphasize the importance of practicing the learned skills - Provide specific suggestions for how coaches can reinforce these skills in future sessions - Encourage participants to reflect on their progress and set goals for improvement Ensure that the conclusion ties together all the main concepts covered in the training, reinforces the learning objectives, and provides clear takeaways for both participants and coaches. The questions in the conclusion should prompt critical thinking about the skills practiced and their application in the sport.`; const completion = await openai.chat.completions.create({ messages: [{ role: "user", content: prompt + `\n\nRegenerate key: ${regenerateKey}` }], model: "gpt-4o-mini", max_tokens: 1500, }); let trainingPlan = marked(completion.choices[0].message.content); // Extract video placeholders const videoPlaceholders = trainingPlan.match(/\[VIDEO: .+?\]/g) || []; // Fetch and embed YouTube videos const youtubeLinks = []; for (const placeholder of videoPlaceholders) { const searchQuery = placeholder.replace("[VIDEO: ", "").replace("]", ""); const videoId = await getYouTubeVideoId(searchQuery, sport, YOUTUBE_API_KEY); if (videoId) { const embedHtml = `

`; trainingPlan = trainingPlan.replace(placeholder, embedHtml); youtubeLinks.push(`https://www.youtube.com/watch?v=${videoId}`); } } return new Response(JSON.stringify({ trainingPlan, youtubeLinks }), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "POST" && new URL(request.url).pathname === "/share-training") { const { trainingPlan, emailAddress, youtubeLinks } = await request.json(); const { email } = await import("https://esm.town/v/std/email"); // Function to insert YouTube links into the training plan const insertYouTubeLinks = (plan, links) => { let modifiedPlan = plan; let linkIndex = 0; // Replace each video container with a link modifiedPlan = modifiedPlan.replace( /

[\s\S]*?<\/div>/g, () => { if (linkIndex < links.length) { const link = links[linkIndex]; linkIndex++; return `

Video Demonstration: ${link}

`; } return ""; }, ); return modifiedPlan; }; // Insert YouTube links into the training plan const modifiedTrainingPlan = insertYouTubeLinks(trainingPlan, youtubeLinks); try { await email({ to: emailAddress, subject: "Your Coach Companion Training Plan", html: `

Your Coach Companion Training Plan

${modifiedTrainingPlan} `, }); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error sending email:", error); return new Response(JSON.stringify({ success: false, error: error.message }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } return new Response( ` Coach Companion - Sport Training Planner

`, { headers: { "content-type": "text/html" }, }, ); } async function getYouTubeVideoId(query, sport, apiKey, useApiKey = true) { if (useApiKey) { try { const searchUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${ encodeURIComponent(sport + " " + query) }&key=${apiKey}&type=video&maxResults=1`; const response = await fetch(searchUrl); const data = await response.json(); if (data.error) { console.warn("YouTube API error:", data.error.message); return getFallbackYouTubeLink(query, sport); } if (data.items && data.items.length > 0) { return data.items[0].id.videoId; } } catch (error) { console.error("Error fetching from YouTube API:", error); } } return getFallbackYouTubeLink(query, sport); } function getFallbackYouTubeLink(query, sport) { const searchQuery = encodeURIComponent(`${sport} ${query}`); return `https://www.youtube.com/results?search_query=${searchQuery}`; } export default server;

savvyTealCardinal

Versions

v0