Fork of Grok by xAI - Free and Unlimited was forked from Grok by xAI - Free and Unlimited
Continue chatting to ask questions about or make changes to it.
This docs is about Putee.js , u can know more from it.
I want u to change the AI settings here, first of u have to change the AI model. from Grok to Open Router. but not this same way.. there is a different way i need u to follow .. for example take this code ...
<html>
<body>
<div style="max-width: 800px; margin: 20px auto; font-family: Arial, sans-serif;">
<h1>OpenRouter Model Explorer</h1>
<select id="model-select" style="padding: 8px; margin-bottom: 10px;">
<option value="openrouter:meta-llama/llama-3.1-8b-instruct">Meta Llama 3.1 (8B)</option>
<option value="openrouter:deepseek/deepseek-chat-v3-0324">DeepSeek V3</option>
<option value="openrouter:x-ai/grok-beta">Grok</option>
<option value="openrouter:anthropic/claude-3.7-sonnet">Anthropic Claude 3.7 Sonnet</option>
<option value="openrouter:mistralai/mistral-7b-instruct">Mistral 7B</option>
<option value="openrouter:google/gemini-pro-1.5">Google Gemini Pro 1.5</option>
<option value="openrouter:openai/gpt-4o">OpenAI GPT-4o</option>
</select>
<textarea id="prompt" rows="4" style="width: 100%; padding: 8px; margin-bottom: 10px;"
placeholder="Enter your prompt here...">Explain how solar panels work.</textarea>
<button id="generate" style="padding: 8px 16px;">Generate</button>
<div id="loading" style="display: none; margin-top: 10px;">Generating response...</div>
<div id="response" style="margin-top: 20px; padding: 15px; border: 1px solid #ddd;
border-radius: 5px; min-height: 200px;"></div>
</div>
<script src="https://js.puter.com/v2/"></script>
<script>
document.getElementById('generate').addEventListener('click', async () => {
const modelSelect = document.getElementById('model-select');
const promptInput = document.getElementById('prompt');
const responseDiv = document.getElementById('response');
const loadingDiv = document.getElementById('loading');
const selectedModel = modelSelect.value;
const prompt = promptInput.value;
if (!prompt) return;
responseDiv.innerHTML = '';
loadingDiv.style.display = 'block';
try {
const response = await puter.ai.chat(prompt, {model: selectedModel});
responseDiv.innerHTML = response;
} catch (error) {
responseDiv.innerHTML = `Error: ${error.message}`;
} finally {
loadingDiv.style.display = 'none';
}
});
</script>
</body>
</html>
it should basically have a Model Selection Interface from where users can select a model and then chat with it.
use the above same models in the code for this open router chat app too.. change this grok to open router.. but for now only change the ai models in the code only... the branding we will do later, i will tell u , dont do now. change anything related to grok in the code except the grok branding in the website... dont change that , change only the ai related code the script.
I'll help you modify your Grok chat application to use OpenRouter models while keeping the existing branding. Based on the Puter.js documentation and your example, I'll add a model selection interface and update the AI functionality.
The changes I've made:
sendMessage function to use the selected model from the dropdown, with the proper "openrouter:" prefix format.The model selection dropdown is styled to match your existing dark theme and will allow users to switch between different AI models while chatting. The default model is set to Meta Llama 3.1 (8B), but users can easily switch to any of the other available models.