\n {sectionTitles[index]}\n {index === 0 && \"Recommended Pokémon\"}\n {index === 1 && \"Strategy\"}\n {index === 2 && \"Type Advantages\"}\n

{section.trim()}

\n ));\n}\n\nfunction App() {\n const [pokemons, setPokemons] = useState([]);\n const [battleRecommendation, setBattleRecommendation] = useState(\"\");\n const [challengerInput, setChallengerInput] = useState(\"\");\n const [error, setError] = useState(null);\n const [apiKey, setApiKey] = useState(null);\n\n // State for user-specified Pokémon inputs\n const [userPokemonInputs, setUserPokemonInputs] = useState([\"\", \"\", \"\"]);\n\n // Initialize cache using useRef\n const pokemonCache = useRef<{ [key: number]: Pokemon }>({});\n\n // Data Validation Function\n function validatePokemonData(pokemon: any): Pokemon | null {\n if (\n typeof pokemon.id !== \"number\"\n || typeof pokemon.name !== \"string\"\n || !pokemon.sprites?.front_default\n || !Array.isArray(pokemon.stats)\n || !Array.isArray(pokemon.types)\n ) {\n console.warn(\"Invalid Pokémon data:\", pokemon);\n return null;\n }\n\n // Further validation can be added here (e.g., checking stats ranges)\n return pokemon as Pokemon;\n }\n\n // Handle input change for user-specified Pokémon\n function handleUserInputChange(index: number, value: string) {\n const newInputs = [...userPokemonInputs];\n newInputs[index] = value;\n setUserPokemonInputs(newInputs);\n }\n\n // Load user-specified Pokémon with verification\n async function loadUserPokemons() {\n const fetchedPokemons: Pokemon[] = [];\n for (const name of userPokemonInputs) {\n if (name.trim() === \"\") continue;\n try {\n const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${name.toLowerCase()}`);\n if (!response.ok) {\n setError(`Pokémon \"${name}\" not found. Please check the name and try again.`);\n return;\n }\n const data = await response.json();\n const validatedPokemon = validatePokemonData(data);\n if (validatedPokemon) {\n fetchedPokemons.push(validatedPokemon);\n // Cache the valid Pokémon\n pokemonCache.current[validatedPokemon.id] = validatedPokemon;\n } else {\n setError(`Invalid data for Pokémon: ${name}`);\n return;\n }\n } catch (err) {\n console.error(`Error fetching Pokémon ${name}:`, err);\n setError(`Failed to fetch Pokémon: ${name}. Please try again.`);\n return;\n }\n }\n\n if (fetchedPokemons.length > 0) {\n setPokemons(fetchedPokemons);\n setError(null);\n } else {\n setError(\"No valid Pokémon names entered.\");\n }\n }\n\n // Fetch random Pokémon with verification\n async function fetchRandomPokemon() {\n const pokemonIds = Array.from({ length: 3 }, () => Math.floor(Math.random() * 898) + 1);\n const fetchedPokemons: Pokemon[] = [];\n\n for (const id of pokemonIds) {\n // Check cache first\n if (pokemonCache.current[id]) {\n fetchedPokemons.push(pokemonCache.current[id]);\n } else {\n try {\n const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);\n if (!res.ok) {\n setError(\"Failed to fetch a valid Pokémon. Please try again.\");\n return;\n }\n const data = await res.json();\n const validatedPokemon = validatePokemonData(data);\n if (validatedPokemon) {\n pokemonCache.current[id] = validatedPokemon; // Cache the valid Pokémon\n fetchedPokemons.push(validatedPokemon);\n } else {\n setError(\"Fetched Pokémon data is invalid. Please try again.\");\n return;\n }\n } catch (err) {\n console.error(`Error fetching Pokémon with ID ${id}:`, err);\n setError(\"Failed to fetch Pokémon data. Please try again.\");\n return;\n }\n }\n }\n\n setPokemons(fetchedPokemons);\n // Reset any previous errors when fetching new Pokémon\n setError(null);\n }\n\n useEffect(() => {\n // Initially load random Pokémon\n fetchRandomPokemon();\n // Fetch API key when component mounts\n getCerebrasKey().then(key => {\n if (key) {\n setApiKey(key);\n } else {\n setError(\"Failed to retrieve Cerebras API key\");\n }\n });\n }, []);\n\n async function generateBattleRecommendation() {\n // Clear previous recommendation and errors\n setBattleRecommendation(\"\");\n setError(null);\n\n // Validate inputs\n if (pokemons.length === 0) {\n setError(\"Please generate or specify Pokémon first\");\n return;\n }\n\n if (!challengerInput.trim()) {\n setError(\"Please enter a challenger's Pokémon\");\n return;\n }\n\n if (!apiKey) {\n setError(\"Cerebras API key is not available\");\n return;\n }\n\n try {\n const { OpenAI } = await import(\"https://esm.sh/openai\");\n const client = new OpenAI({\n apiKey: apiKey,\n baseURL: \"https://api.cerebras.ai/v1\",\n dangerouslyAllowBrowser: true, // Added to allow browser-based API calls\n });\n\n const recommendation = await client.chat.completions.create({\n model: \"llama-3.3-70b\",\n messages: [\n {\n role: \"system\",\n content: `\nYou are an expert Pokémon battle strategist familiar with all official Pokémon game mechanics, types, stats, abilities, and move sets. Provide detailed and realistic battle recommendations that adhere to the actual rules and dynamics of Pokémon battles.\nEnsure that all suggestions are viable within the context of the Pokémon games and do not include overpowered or non-existent strategies.\nFormat your responses with the following sections using these prefixes:\n🏆 Recommended Pokémon:\n🔍 Strategy:\n⚔️ Type Advantages:\n `,\n },\n {\n role: \"user\",\n content: `Comprehensive battle strategy analysis:\nMy Team: ${\n pokemons.map(p =>\n `${p.name.toUpperCase()} (${p.types.map(t => t.type.name.toUpperCase()).join(\"/\")}) \n Stats - HP: ${p.stats.find(s => s.stat.name === \"hp\")?.base_stat}, \n Attack: ${p.stats.find(s => s.stat.name === \"attack\")?.base_stat}, \n Defense: ${p.stats.find(s => s.stat.name === \"defense\")?.base_stat}`\n ).join(\", \")\n }\nChallenger's Pokémon: ${challengerInput.toUpperCase()}\n\nProvide a strategic battle recommendation that includes:\n1. Type advantages and disadvantages\n2. Recommended Pokémon from my team\n3. Potential battle strategies\n4. Specific move suggestions\n5. Defensive and offensive considerations`,\n },\n ],\n max_tokens: 1500,\n });\n\n const recommendationText = recommendation.choices[0]?.message?.content;\n\n if (recommendationText) {\n setBattleRecommendation(recommendationText);\n } else {\n setError(\"No recommendation could be generated. Please try again.\");\n }\n } catch (error) {\n console.error(\"Battle recommendation error:\", error);\n setError(`Failed to generate recommendation: ${error instanceof Error ? error.message : \"Unknown error\"}`);\n }\n }\n\n return (\n \n

🎮 Pokémon Battle Advisor 🃏

\n Get tailored battle strategies by specifying your Pokémon or randomizing them!\n

\n\n {/* User-Specified Pokémon Inputs */}\n

🔧 Specify Your Pokémon

Enter the names of up to three Pokémon to include in your team.

\n {userPokemonInputs.map((input, index) => (\n handleUserInputChange(index, e.target.value)}\n placeholder={`Enter Pokémon ${index + 1} Name`}\n style={{\n width: \"100%\",\n padding: \"10px\",\n border: \"1px solid #ccc\",\n borderRadius: \"5px\",\n boxSizing: \"border-box\",\n }}\n title={`Enter the name of your Pokémon ${index + 1}`}\n />\n ))}\n {\n (e.currentTarget as HTMLButtonElement).style.backgroundColor = \"#732d91\";\n }}\n onMouseLeave={(e) => {\n (e.currentTarget as HTMLButtonElement).style.backgroundColor = \"#8e44ad\";\n }}\n title=\"Load your specified Pokémon into the team\"\n >\n 🎯 Load Specified Pokémon\n \n

\n\n {/* Or */}\n

\n — OR —\n

\n\n {/* Randomize Pokémon */}\n

\n {\n (e.currentTarget as HTMLButtonElement).style.backgroundColor = \"#45a049\";\n }}\n onMouseLeave={(e) => {\n (e.currentTarget as HTMLButtonElement).style.backgroundColor = \"#4CAF50\";\n }}\n title=\"Fetch a random set of Pokémon for your team\"\n >\n 🔀 Randomize Pokémon\n \n

\n\n {/* Pokémon Display Grid */}\n \n {pokemons.map((pokemon, index) => (\n {\n (e.currentTarget as HTMLDivElement).style.transform = \"scale(1.05)\";\n }}\n onMouseLeave={(e) => {\n (e.currentTarget as HTMLDivElement).style.transform = \"scale(1)\";\n }}\n >\n \n

{pokemon.name.toUpperCase()}

Type: {pokemon.types.map(t => t.type.name).join(\"/\")}

\n {pokemon.stats.map(stat => (\n

\n {stat.stat.name.toUpperCase()}: {stat.base_stat}\n

\n ))}\n

\n \n ))}\n \n\n {/* Challenger Input */}\n

🗡️ Enter Challenger's Pokémon

\n Provide the name of your opponent's Pokémon to receive a battle recommendation.\n

\n setChallengerInput(e.target.value)}\n placeholder=\"Enter challenger's Pokémon\"\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n border: \"1px solid #ccc\",\n borderRadius: \"5px\",\n boxSizing: \"border-box\",\n }}\n title=\"Enter the name of your challenger's Pokémon\"\n />\n {\n (e.currentTarget as HTMLButtonElement).style.backgroundColor = \"#1976D2\";\n }}\n onMouseLeave={(e) => {\n (e.currentTarget as HTMLButtonElement).style.backgroundColor = \"#2196F3\";\n }}\n title=\"Generate a battle recommendation based on your team and the challenger\"\n >\n 🤖 Get Battle Recommendation\n \n

\n\n {/* Error Message */}\n {error && (\n \n

⚠️ Error:

{error}

\n \n )}\n\n {/* Battle Recommendation Display */}\n {battleRecommendation && (\n \n \n 🏆 Battle Recommendation\n \n \n {formatRecommendation(battleRecommendation)}\n \n \n )}\n\n {/* View Source Link */}\n \n View Source\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n // Check if this is a request for the API key\n const url = new URL(request.url);\n if (url.pathname === \"/api/cerebras-key\") {\n const apiKey = Deno.env.get(\"CEREBRAS_API_KEY\");\n return new Response(JSON.stringify({ apiKey }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Regular HTML response\n return new Response(\n `\n \n \n Pokémon Battle Advisor\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","deleted","label",[99],"permalink","https://www.val.town/x/shuyib/pokemonBattleAdvisor/code/main.tsx","extension","actionData","errors"]