# ---------------------------------------------------------------------- # Routes # ---------------------------------------------------------------------- @app.route("/", methods=["GET"]) def index(): # Render empty page – the UI will fetch results via AJAX. return render_template("index.html")
<div id="results"></div>
# ---------------------------------------------------------------------- # CONFIG – put your YouTube API key in an environment variable for safety # ---------------------------------------------------------------------- YOUTUBE_API_KEY = os.getenv("YT_API_KEY") YOUTUBE_SEARCH_URL = "https://www.googleapis.com/youtube/v3/search"
fetch(`/search?q=$encodeURIComponent(query)`) .then(r => r.json()) .then(data => if (data.error) document.getElementById('results').innerText = "Error: " + data.error; return; const container = document.getElementById('results'); data.videos.forEach(v => const card = document.createElement('div'); card.className = 'video-card'; card.innerHTML = ` <img src="$v.thumb" alt="thumb"> <div> <strong>$v.title</strong><br> <small>Channel: $v.channel<br> Published: $new Date(v.published).toLocaleDateString()</small> </div>`; card.onclick = () => loadVideo(v.video_id); container.appendChild(card); ); ) .catch(err => document.getElementById('results').innerText = "Fetch error: " + err; );
app = Flask(__name__)
results = [] for item in data.get("items", []): video_id = item["id"]["videoId"] snippet = item["snippet"] results.append( "video_id": video_id, "title": snippet["title"], "channel": snippet["channelTitle"], "thumb": snippet["thumbnails"]["medium"]["url"], "published": snippet["publishedAt"] ) return results
