/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; interface Suggestion { text: string; imageUrl: string; productUrl: string; } function App() { const [age, setAge] = useState([]); const [budget, setBudget] = useState([]); const [loading, setLoading] = useState(false); const [suggestions, setSuggestions] = useState([]); const [shownSuggestions, setShownSuggestions] = useState([]); const [error, setError] = useState(null); const [openDropdown, setOpenDropdown] = useState(null); const [buttonPressed, setButtonPressed] = useState(false); useEffect(() => { if (suggestions.length > 0) { console.log("Suggestions updated:", suggestions); } }, [suggestions]); useEffect(() => { if ((age.length > 0 && budget.length > 0) || buttonPressed) { fetchSuggestions(); setButtonPressed(false); } }, [age, budget, buttonPressed]); const fetchSuggestions = async (isMoreSuggestions: boolean = false) => { setLoading(true); setError(null); if (!isMoreSuggestions) { setShownSuggestions([]); } try { const response = await fetch("/api/shopping-assistant", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ age, budget, shownSuggestions }), }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); console.error("API error response:", errorData); throw new Error(errorData.error || `HTTP error! status: ${response.status}`); } const data = await response.json(); console.log("API response:", data); if (!data.suggestions || !Array.isArray(data.suggestions)) { throw new Error("No suggestions received from the server"); } setSuggestions(data.suggestions); setShownSuggestions(prevShown => [...prevShown, ...data.suggestions.map(s => s.text)]); } catch (err) { console.error("Error in fetchSuggestions:", err); setError(`An error occurred while fetching suggestions: ${err.message}`); } finally { setLoading(false); } }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setButtonPressed(true); }; const handleMoreSuggestions = async () => { await fetchSuggestions(true); }; const toggleDropdown = (id: string) => { setOpenDropdown(openDropdown === id ? null : id); }; const handleSelectChange = (setter: React.Dispatch>, values: string[]) => { setter(values); setOpenDropdown(null); }; const handleNewSearch = () => { setAge([]); setBudget([]); setSuggestions([]); setShownSuggestions([]); setError(null); setButtonPressed(false); }; return (

✨ AI Powered Gift Suggestion App ✨

Be their favorite Santa this Christmas — with a Free AI-powered App!

toggleDropdown("age")}> 🎁 Who is this gift intended for? (Optional) {openDropdown === "age" && ( )} {age.length > 0 && (

Selected: {age.join(", ")}

)}

toggleDropdown("budget")}> 🎁 What is your budget? (Optional) {openDropdown === "budget" && ( )} {budget.length > 0 && (

Selected: {budget.join(", ")}

)}

{loading && (

)} {error &&

{error}

} {suggestions.length > 0 && (

Gift Suggestions:

Note: The images below are AI-generated. Click on an image to see actual products on Google Shopping.

{suggestions.map((suggestion, index) => (

{suggestion.imageUrl && ( {suggestion.text}

{ console.error("Image failed to load:", e); e.currentTarget.style.display = 'none'; }} /> )} {!suggestion.imageUrl &&

No image available for this product.

}

{suggestion.text}

))}

)}

Made by Trollishka with the priceless help of Steve Krouse

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function searchProduct(query: string): Promise<{ imageUrl: string; productUrl: string } | null> { try { // Using a more realistic product image placeholder const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(query)}`; // Using Google Shopping as the product search URL const productUrl = `https://www.google.com/search?tbm=shop&q=${encodeURIComponent(query)}`; console.log("Product search result:", { imageUrl, productUrl }); return { imageUrl, productUrl }; } catch (error) { console.error("Error searching for product:", error); } return null; } export default async function server(req: Request): Promise { if (req.method === "POST") { const url = new URL(req.url); if (url.pathname === "/api/shopping-assistant") { try { const { age, budget, shownSuggestions } = await req.json(); // Input validation and randomization const ageOptions = ["Child", "Teenager", "Young Adult", "Adult", "Senior"]; const budgetOptions = ["Less than 20", "20 - 100", "100 - 200", "More than 200"]; const finalAge = age.length > 0 ? age : [ageOptions[Math.floor(Math.random() * ageOptions.length)]]; const finalBudget = budget.length > 0 ? budget : [budgetOptions[Math.floor(Math.random() * budgetOptions.length)]]; const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const completion = await openai.chat.completions.create({ messages: [{ role: "system", content: "You are a helpful shopping assistant. Provide 3 personalized product suggestions based on the user's age group(s) and budget range(s). Be concise and friendly in your response. Format your response as a JSON object with a 'suggestions' array containing 3 objects, each with a 'text' field for the suggestion. Each text should be the name of a specific product, not a general description. Do not include any markdown formatting or code blocks in your response. Avoid suggesting products that have already been shown to the user.", }, { role: "user", content: `Age group(s): ${finalAge.join(", ")}. Budget range(s): ${finalBudget.join(", ")}. Previously shown suggestions: ${shownSuggestions.join(", ")}.`, }], model: "gpt-4o-mini", max_tokens: 300, }); let suggestions: Suggestion[]; try { const content = completion.choices[0].message.content || "{}"; console.log("Raw OpenAI response:", content); const parsedContent = JSON.parse(content); if (!Array.isArray(parsedContent.suggestions) || parsedContent.suggestions.length !== 3) { throw new Error("Invalid suggestions format"); } suggestions = await Promise.all(parsedContent.suggestions.map(async (suggestion: { text: string }) => { const product = await searchProduct(suggestion.text); return { text: suggestion.text, imageUrl: product?.imageUrl || "", productUrl: product?.productUrl || "", }; })); } catch (error) { console.error("Failed to parse OpenAI response:", error); return new Response(JSON.stringify({ error: "Failed to generate suggestions" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } console.log("Final suggestions:", suggestions); return new Response( JSON.stringify({ suggestions }), { headers: { "Content-Type": "application/json" }, }, ); } catch (error) { console.error("Server error:", error); return new Response( JSON.stringify({ error: "Internal server error" }), { status: 500, headers: { "Content-Type": "application/json" }, }, ); } } } return new Response( ` AI Powered Gift Suggestion App

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` @keyframes sparkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes ornamentSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes enhancedSparkle { 0%, 100% { background-position: 0% 50%; opacity: 0.8; } 50% { background-position: 100% 50%; opacity: 1; } } body { font-family: 'Poppins', Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background: linear-gradient(135deg, #f0f8ff 0%, #e0f0ff 100%); position: relative; min-height: 100vh; overflow-x: hidden; display: flex; justify-content: center; align-items: center; } body::before { content: '✨'; position: fixed; top: -10px; left: 0; right: 0; bottom: 0; font-size: 20px; opacity: 0.3; animation: float 5s ease-in-out infinite; pointer-events: none; } .container { max-width: 800px; width: 100%; margin: 0 auto; background-color: rgba(255, 255, 255, 0.9); padding: 30px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); border: 2px solid #ffd700; position: relative; } .main-title { font-family: 'Mountains of Christmas', cursive; color: #e74c3c; text-align: center; font-size: 3em; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); font-weight: 700; } .tagline { font-family: 'Poppins', Arial, sans-serif; color: #2c3e50; text-align: center; font-size: 1.2em; margin-bottom: 30px; font-style: italic; } .sparkle { font-size: 1.2em; margin: 0 10px; animation: sparkle 2s ease-in-out infinite; display: inline-block; } form { display: flex; flex-direction: column; } .form-group { margin-bottom: 25px; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } label { display: block; margin-bottom: 12px; cursor: pointer; color: #228B22; font-weight: bold; font-size: 1.1em; } .optional { font-weight: normal; font-style: italic; color: #228B22; font-size: 0.9em; } .gift-icon { color: #FF0000; margin-right: 5px; } select { width: 100%; padding: 12px; border: 1px solid #bdc3c7; border-radius: 4px; font-size: 16px; color: #2c3e50; transition: border-color 0.3s; font-family: 'Poppins', Arial, sans-serif; } select:focus { outline: none; border-color: #3498db; } select[multiple] { height: auto; min-height: 120px; } button { padding: 14px; background-color: #e74c3c; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 18px; transition: background-color 0.3s; margin-top: 10px; font-family: 'Poppins', Arial, sans-serif; font-weight: 700; } button:hover { background-color: #c0392b; } button:disabled { background-color: #95a5a6; cursor: not-allowed; } .error { color: #e74c3c; margin-top: 15px; text-align: center; font-weight: bold; font-size: 1.1em; } .suggestions { margin-top: 30px; background-color: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .suggestions h2 { color: #2c3e50; margin-bottom: 20px; text-align: center; font-size: 2em; } .suggestions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; justify-content: center; } .suggestion { display: flex; flex-direction: column; align-items: center; text-align: center; } .product-link { display: block; margin-bottom: 10px; } .product-image { max-width: 100%; height: 200px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-image:hover { transform: scale(1.03); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } .product-name { font-weight: bold; color: #34495e; font-size: 1.1em; margin-top: 10px; } .selected-options { margin-top: 10px; font-size: 14px; color: #7f8c8d; font-style: italic; } .button-container { display: flex; justify-content: space-between; margin-top: 25px; } .more-suggestions, .new-search { flex: 1; margin: 0 10px; } .more-suggestions { background-color: #3498db; } .more-suggestions:hover { background-color: #2980b9; } .new-search { background-color: #27ae60; } .new-search:hover { background-color: #2ecc71; } .ai-image-note { font-size: 14px; color: #7f8c8d; font-style: italic; margin-bottom: 15px; text-align: center; } .loader-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.8); z-index: 1000; } .ornament-loader { width: 60px; height: 60px; background-color: #c41e3a; border-radius: 50%; position: relative; animation: ornamentSpin 2s linear infinite; } .ornament-loader::before { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; background-color: #ffd700; border-radius: 50%; } .snowfall-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle, #fff 10%, transparent 10%), radial-gradient(circle, #fff 10%, transparent 10%); background-size: 20px 20px; background-position: 0 0, 10px 10px; animation: float 10s linear infinite; opacity: 0.6; pointer-events: none; } .attribution { margin-top: 20px; text-align: center; font-size: 0.9em; color: #7f8c8d; display: flex; flex-direction: column; align-items: center; } .attribution-top, .attribution-bottom { margin: 5px 0; } .attribution-link { color: #3498db; text-decoration: none; transition: all 0.3s ease; } .attribution-link:hover { color: #2980b9; text-decoration: underline; } .no-image { height: 200px; display: flex; align-items: center; justify-content: center; background-color: #f0f0f0; color: #7f8c8d; border-radius: 8px; font-style: italic; } .sparkle-button { position: relative; overflow: hidden; background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3); background-size: 300% 300%; color: white; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .sparkle-button::before { content: ''; position: absolute; top: -50%; left: -50%; right: -50%; bottom: -50%; background: linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.5) 100% ); transform: rotate(45deg); opacity: 0; transition: opacity 0.3s ease; } .sparkle-button:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); } .sparkle-button:hover::before { opacity: 1; animation: enhancedSparkle 2s infinite linear; } .sparkle-button:active { transform: scale(0.95); } .attribution-link { position: relative; overflow: hidden; background: none; color: #3498db; text-shadow: none; transition: all 0.3s ease; } .attribution-link::before { content: ''; position: absolute; top: -50%; left: -50%; right: -50%; bottom: -50%; background: linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.5) 100% ); transform: rotate(45deg); opacity: 0; transition: opacity 0.3s ease; } .attribution-link:hover { color: #2980b9; text-decoration: underline; } .attribution-link:hover::before { opacity: 1; animation: enhancedSparkle 2s infinite linear; } /* Responsive design */ @media (max-width: 768px) { body { padding: 10px; } .container { padding: 20px; } .main-title { font-size: 2.5em; } .tagline { font-size: 1em; } .form-group { padding: 15px; } label { font-size: 1em; } select, button { font-size: 16px; } .suggestions h2 { font-size: 1.8em; } .suggestions-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .product-image { height: 150px; } .button-container { flex-direction: column; } .more-suggestions, .new-search { margin: 10px 0; } } @media (max-width: 480px) { .main-title { font-size: 2.2em; } .tagline { font-size: 0.9em; } .form-group { padding: 10px; } .sparkle { font-size: 1em; } .ornament-loader { width: 40px; height: 40px; } .ornament-loader::before { width: 15px; height: 15px; top: -8px; } .suggestions-grid { grid-template-columns: 1fr; } .product-image { height: 180px; } } `;

trollishka