Skip to content

Instantly share code, notes, and snippets.

@pedes

pedes/AI-Index.html

Created March 30, 2025 16:30
Show Gist options
  • Save pedes/b67d9a0e4a9c77a35f33d5cf2f258c02 to your computer and use it in GitHub Desktop.
Save pedes/b67d9a0e4a9c77a35f33d5cf2f258c02 to your computer and use it in GitHub Desktop.
Download ZIP
Sample Index page for an AI LLM chat
Raw
AI-Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About This AI Model</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #6c5ce7;
--secondary: #a29bfe;
--dark: #2d3436;
--light: #f5f6fa;
--accent: #fd79a8;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--light);
color: var(--dark);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
background-image: radial-gradient(circle at 10% 20%, var(--secondary) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, var(--accent) 0%, transparent 20%);
}
.card {
background-color: white;
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 900px;
overflow: hidden;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card-header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 2rem;
text-align: center;
position: relative;
overflow: hidden;
}
.card-header h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
position: relative;
z-index: 2;
}
.card-header p {
font-size: 1.2rem;
opacity: 0.9;
position: relative;
z-index: 2;
}
.card-header::after {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background-image:
radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
animation: rotate 20s linear infinite;
z-index: 1;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.card-body {
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.model-info {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.model-specs {
flex: 1;
min-width: 250px;
}
.spec-item {
display: flex;
align-items: flex-start;
margin-bottom: 1.5rem;
}
.spec-icon {
background-color: var(--primary);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
flex-shrink: 0;
}
.spec-content h3 {
margin-bottom: 0.3rem;
color: var(--primary);
}
.model-visual {
flex: 1;
min-width: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ai-mind {
position: relative;
width: 200px;
height: 200px;
margin-bottom: 1.5rem;
}
.core {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle, var(--primary) 0%, var(--secondary) 70%);
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 2rem;
box-shadow: 0 0 30px rgba(108, 92, 231, 0.4);
animation: pulse 3s infinite alternate;
}
@keyframes pulse {
0% { transform: scale(1); box-shadow: 0 0 30px rgba(108, 92, 231, 0.4); }
100% { transform: scale(1.05); box-shadow: 0 0 50px rgba(108, 92, 231, 0.6); }
}
.neuron {
position: absolute;
width: 15px;
height: 15px;
background-color: var(--accent);
border-radius: 50%;
animation: float 5s infinite ease-in-out;
}
.neuron:nth-child(1) { top: 10%; left: 30%; animation-delay: 0s; }
.neuron:nth-child(2) { top: 70%; left: 20%; animation-delay: 0.5s; }
.neuron:nth-child(3) { top: 40%; left: 80%; animation-delay: 1s; }
.neuron:nth-child(4) { top: 80%; left: 70%; animation-delay: 1.5s; }
.neuron:nth-child(5) { top: 20%; left: 60%; animation-delay: 2s; }
@keyframes float {
0%, 100% { transform: translateY(0) translateX(0); }
50% { transform: translateY(-20px) translateX(10px); }
}
.connection {
position: absolute;
background-color: rgba(253, 121, 168, 0.3);
transform-origin: 0 0;
}
.capabilities {
background-color: rgba(108, 92, 231, 0.1);
border-radius: 15px;
padding: 1.5rem;
margin-top: 1rem;
}
.capabilities h2 {
color: var(--primary);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.capability-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.capability {
background-color: white;
border-radius: 10px;
padding: 1rem;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.capability:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.capability i {
color: var(--primary);
}
.interactive-section {
margin-top: 2rem;
background: linear-gradient(135deg, rgba(253, 121, 168, 0.1), rgba(108, 92, 231, 0.1));
border-radius: 15px;
padding: 1.5rem;
text-align: center;
}
.interactive-section h2 {
color: var(--primary);
margin-bottom: 1rem;
}
.demo-area {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
#userInput {
width: 100%;
max-width: 500px;
padding: 0.8rem 1rem;
border: 2px solid var(--secondary);
border-radius: 30px;
font-size: 1rem;
outline: none;
transition: border-color 0.3s ease;
}
#userInput:focus {
border-color: var(--primary);
}
button {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
border: none;
padding: 0.8rem 2rem;
border-radius: 30px;
font-size: 1rem;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
}
#responseArea {
margin-top: 1rem;
padding: 1rem;
background-color: white;
border-radius: 15px;
width: 100%;
max-width: 700px;
min-height: 100px;
text-align: left;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}
.typing {
display: inline-block;
}
.typing::after {
content: "▋";
animation: blink 1s infinite;
opacity: 0.7;
}
@keyframes blink {
0%, 100% { opacity: 0.7; }
50% { opacity: 0; }
}
footer {
margin-top: 2rem;
text-align: center;
color: rgba(45, 52, 54, 0.7);
font-size: 0.9rem;
}
@media (max-width: 768px) {
.card-header h1 {
font-size: 2rem;
}
.model-info {
flex-direction: column;
}
.capability-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="card">
<div class="card-header">
<h1>About This AI Model</h1>
<p>A sophisticated language model designed for conversation and assistance</p>
</div>
<div class="card-body">
<div class="model-info">
<div class="model-specs">
<div class="spec-item">
<div class="spec-icon">
<i class="fas fa-brain"></i>
</div>
<div class="spec-content">
<h3>Architecture</h3>
<p>A transformer-based neural network with billions of parameters, trained on diverse datasets to understand and generate human-like text.</p>
</div>
</div>
<div class="spec-item">
<div class="spec-icon">
<i class="fas fa-graduation-cap"></i>
</div>
<div class="spec-content">
<h3>Training</h3>
<p>Extensive pre-training on vast amounts of text data from books, articles, and websites, followed by fine-tuning for specific tasks.</p>
</div>
</div>
<div class="spec-item">
<div class="spec-icon">
<i class="fas fa-language"></i>
</div>
<div class="spec-content">
<h3>Capabilities</h3>
<p>Multilingual understanding, contextual conversation, creative writing, technical explanation, and general knowledge assistance.</p>
</div>
</div>
</div>
<div class="model-visual">
<div class="ai-mind">
<div class="core">
<i class="fas fa-robot"></i>
</div>
<div class="neuron"></div>
<div class="neuron"></div>
<div class="neuron"></div>
<div class="neuron"></div>
<div class="neuron"></div>
</div>
<p>Neural network visualization representing interconnected knowledge</p>
</div>
</div>
<div class="capabilities">
<h2><i class="fas fa-star"></i> Key Features</h2>
<div class="capability-grid">
<div class="capability">
<i class="fas fa-comment-alt"></i>
<span>Natural Conversations</span>
</div>
<div class="capability">
<i class="fas fa-lightbulb"></i>
<span>Creative Ideas</span>
</div>
<div class="capability">
<i class="fas fa-code"></i>
<span>Code Generation</span>
</div>
<div class="capability">
<i class="fas fa-book"></i>
<span>Knowledge Retrieval</span>
</div>
<div class="capability">
<i class="fas fa-globe"></i>
<span>Multilingual</span>
</div>
<div class="capability">
<i class="fas fa-question-circle"></i>
<span>Problem Solving</span>
</div>
</div>
</div>
<div class="interactive-section">
<h2><i class="fas fa-play-circle"></i> Try It Out</h2>
<div class="demo-area">
<input type="text" id="userInput" placeholder="Ask me anything...">
<button id="submitBtn">Get Response</button>
<div id="responseArea"></div>
</div>
</div>
</div>
<footer>
<p>This interactive UI represents an advanced AI language model. The actual architecture may vary.</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const submitBtn = document.getElementById('submitBtn');
const userInput = document.getElementById('userInput');
const responseArea = document.getElementById('responseArea');
// Predefined responses for the demo
const responses = [
"I'm an AI language model designed to understand and generate human-like text based on my training data.",
"My architecture is based on transformer neural networks, which allow me to process and understand language patterns effectively.",
"I can assist with answering questions, generating ideas, explaining concepts, and much more within my knowledge scope.",
"While I don't have consciousness or emotions, I can simulate empathetic responses based on my training.",
"My knowledge is current until my training cut-off date, and I don't have real-time information access.",
"I generate responses by predicting the most likely words to follow based on patterns in my training data."
];
submitBtn.addEventListener('click', function() {
const question = userInput.value.trim();
if (question) {
// Show typing indicator
responseArea.innerHTML = '<span class="typing">Thinking...</span>';
// Simulate thinking delay
setTimeout(() => {
// Select a random response for the demo
const randomResponse = responses[Math.floor(Math.random() * responses.length)];
// Display the response with typing animation
typeWriter(responseArea, randomResponse);
}, 1000);
} else {
responseArea.innerHTML = "Please ask a question first!";
}
});
// Allow pressing Enter to submit
userInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
submitBtn.click();
}
});
// Simple typewriter effect function
function typeWriter(element, text, i = 0) {
if (i < text.length) {
element.innerHTML = text.substring(0, i + 1);
setTimeout(() => typeWriter(element, text, i + 1), 20);
}
}
// Generate connections between neurons for the visualization
function generateConnections() {
const aiMind = document.querySelector('.ai-mind');
// Get positions of all neurons
const neurons = Array.from(document.querySelectorAll('.neuron'));
const positions = neurons.map(neuron => {
const rect = neuron.getBoundingClientRect();
const parentRect = aiMind.getBoundingClientRect();
return {
x: rect.left - parentRect.left + rect.width / 2,
y: rect.top - parentRect.top + rect.height / 2
};
});
// Create connections (for demo, we'll just connect some neurons)
const connections = [
{ from: 0, to: 1 },
{ from: 1, to: 3 },
{ from: 2, to: 4 },
{ from: 0, to: 4 },
{ from: 3, to: 2 }
];
connections.forEach(conn => {
const from = positions[conn.from];
const to = positions[conn.to];
const length = Math.sqrt(Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2));
const angle = Math.atan2(to.y - from.y, to.x - from.x) * 180 / Math.PI;
const connection = document.createElement('div');
connection.className = 'connection';
connection.style.width = `${length}px`;
connection.style.height = '2px';
connection.style.left = `${from.x}px`;
connection.style.top = `${from.y}px`;
connection.style.transform = `rotate(${angle}deg)`;
aiMind.appendChild(connection);
});
}
// Generate connections when the page loads
generateConnections();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment