|
<!doctype html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
<title>Grok-2 AI Interface</title> |
|
<link rel="stylesheet" href="style.css" /> |
|
</head> |
|
<body> |
|
<header> |
|
<div class="container"> |
|
<h1 class="logo">Grok-2 AI Interface</h1> |
|
<nav> |
|
<ul> |
|
<li><a href="#" class="active" data-section="api-key">API Key</a></li> |
|
<li><a href="#" data-section="image-gen">Image Generation</a></li> |
|
<li><a href="#" data-section="vision">Vision Analysis</a></li> |
|
</ul> |
|
</nav> |
|
</div> |
|
</header> |
|
|
|
<main> |
|
<div class="container"> |
|
<section id="api-key" class="section active"> |
|
<div class="api-key-container"> |
|
<h2>API Key Management</h2> |
|
<p>Enter your Grok-2 API key below. The key will be stored locally on your device.</p> |
|
|
|
<div class="input-group"> |
|
<input type="password" id="api-key-input" placeholder="Enter your Grok-2 API key"> |
|
<button id="save-api-key" class="btn">Save API Key</button> |
|
<button id="clear-api-key" class="btn btn-secondary">Clear Saved Key</button> |
|
</div> |
|
|
|
<div id="api-key-status"></div> |
|
</div> |
|
</section> |
|
|
|
<section id="image-gen" class="section"> |
|
<div class="model-card"> |
|
<div class="model-info"> |
|
<h2>Grok-2-Image-1212</h2> |
|
<p>Image Generation Model</p> |
|
<p>Our latest image generation model, capable of creating high-quality, detailed images from text prompts with enhanced creativity and precision.</p> |
|
</div> |
|
|
|
<div class="input-container"> |
|
<textarea id="image-prompt" placeholder="Enter a detailed description of the image you want to generate..."></textarea> |
|
<button id="generate-image" class="btn">Generate Image</button> |
|
</div> |
|
|
|
<div class="result-container"> |
|
<div id="image-result" class="result-box"></div> |
|
<div id="generation-status" class="status"></div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
<section id="vision" class="section"> |
|
<div class="model-card"> |
|
<div class="model-info"> |
|
<h2>Grok-2-Vision-1212</h2> |
|
<p>Image Analysis Model</p> |
|
<p>Our latest image understanding model with increased context window that can process a wide variety of visual information, including documents, diagrams, charts, screenshots, and photographs.</p> |
|
</div> |
|
|
|
<div class="input-container"> |
|
<div class="upload-area" id="upload-area"> |
|
<p>Drag and drop an image or click to upload</p> |
|
<input type="file" id="image-upload" accept="image/*" hidden> |
|
</div> |
|
<textarea id="vision-prompt" placeholder="Optional: Enter a question about the image..."></textarea> |
|
<button id="analyze-image" class="btn" disabled>Analyze Image</button> |
|
</div> |
|
|
|
<div class="result-container"> |
|
<div id="uploaded-image" class="uploaded-image"></div> |
|
<div id="vision-result" class="result-box"></div> |
|
<div id="vision-status" class="status"></div> |
|
</div> |
|
</div> |
|
</section> |
|
</div> |
|
</main> |
|
|
|
<footer> |
|
<div class="container"> |
|
<p>This is an unofficial interface. Grok-2 is a product of xAI.</p> |
|
<p>Your API key is stored locally in your browser and is never sent to our servers.</p> |
|
</div> |
|
</footer> |
|
|
|
<script src="script.js"></script> |
|
</body> |
|
</html> |
|
|
