\n ✨\n AI Powered Gift Suggestion App\n ✨\n

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

\n toggleDropdown(\"age\")}>\n 🎁 Who is this gift intended for? (Optional)\n \n {openDropdown === \"age\" && (\n handleSelectChange(setAge, Array.from(e.target.selectedOptions, option => option.value))}\n >\n \n \n \n \n \n \n \n )}\n {age.length > 0 && (\n

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

\n )}\n

\n toggleDropdown(\"budget\")}>\n 🎁 What is your budget? (Optional)\n \n {openDropdown === \"budget\" && (\n handleSelectChange(setBudget, Array.from(e.target.selectedOptions, option => option.value))}\n >\n \n \n \n \n \n \n )}\n {budget.length > 0 && (\n

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

\n )}\n

\n \n

\n {loading && (\n

\n )}\n {error &&

{error}

}\n {suggestions.length > 0 && (\n

Gift Suggestions:

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

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

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

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

No image available for this product.

}\n

{suggestion.text}

\n ))}\n

\n \n \n

\n )}\n

\n Powered by Val Town\n

\n Made by Trollishka with the priceless help of Steve Krouse\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function searchProduct(query: string): Promise<{ imageUrl: string; productUrl: string } | null> {\n try {\n // Using a more realistic product image placeholder\n const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(query)}`;\n // Using Google Shopping as the product search URL\n const productUrl = `https://www.google.com/search?tbm=shop&q=${encodeURIComponent(query)}`;\n\n console.log(\"Product search result:\", { imageUrl, productUrl });\n return { imageUrl, productUrl };\n } catch (error) {\n console.error(\"Error searching for product:\", error);\n }\n\n return null;\n}\n\nexport default async function server(req: Request): Promise {\n if (req.method === \"POST\") {\n const url = new URL(req.url);\n\n if (url.pathname === \"/api/shopping-assistant\") {\n try {\n const { age, budget, shownSuggestions } = await req.json();\n\n // Input validation and randomization\n const ageOptions = [\"Child\", \"Teenager\", \"Young Adult\", \"Adult\", \"Senior\"];\n const budgetOptions = [\"Less than 20\", \"20 - 100\", \"100 - 200\", \"More than 200\"];\n\n const finalAge = age.length > 0 ? age : [ageOptions[Math.floor(Math.random() * ageOptions.length)]];\n const finalBudget = budget.length > 0 ? budget : [budgetOptions[Math.floor(Math.random() * budgetOptions.length)]];\n\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const completion = await openai.chat.completions.create({\n messages: [{\n role: \"system\",\n content:\n \"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.\",\n }, {\n role: \"user\",\n content: `Age group(s): ${finalAge.join(\", \")}. Budget range(s): ${finalBudget.join(\", \")}. Previously shown suggestions: ${shownSuggestions.join(\", \")}.`,\n }],\n model: \"gpt-4o-mini\",\n max_tokens: 300,\n });\n\n let suggestions: Suggestion[];\n try {\n const content = completion.choices[0].message.content || \"{}\";\n console.log(\"Raw OpenAI response:\", content);\n const parsedContent = JSON.parse(content);\n\n if (!Array.isArray(parsedContent.suggestions) || parsedContent.suggestions.length !== 3) {\n throw new Error(\"Invalid suggestions format\");\n }\n\n suggestions = await Promise.all(parsedContent.suggestions.map(async (suggestion: { text: string }) => {\n const product = await searchProduct(suggestion.text);\n return {\n text: suggestion.text,\n imageUrl: product?.imageUrl || \"\",\n productUrl: product?.productUrl || \"\",\n };\n }));\n } catch (error) {\n console.error(\"Failed to parse OpenAI response:\", error);\n return new Response(JSON.stringify({ error: \"Failed to generate suggestions\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n console.log(\"Final suggestions:\", suggestions);\n\n return new Response(\n JSON.stringify({ suggestions }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n console.error(\"Server error:\", error);\n return new Response(\n JSON.stringify({ error: \"Internal server error\" }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n }\n\n return new Response(\n `\n \n \n AI Powered Gift Suggestion App\n \n \n \n \n \n \n

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