Spaces:
Running
Running
File size: 8,389 Bytes
31b1b39 bab596f 1e76d5d 151a7bd 31b1b39 f3d266c c8249ee f3d266c 31b1b39 e73accb 006a718 e73accb bab596f 31b1b39 f4814b8 14b75eb f3d266c 151a7bd f3d266c 31b1b39 c8249ee 31b1b39 0bf7c14 ea8c419 c8249ee 0bf7c14 c8249ee 7b73a40 c8249ee bab596f 0bf7c14 4b029cb 7b73a40 bab596f 0bf7c14 bab596f 0bf7c14 bab596f 0bf7c14 4b029cb 0bf7c14 bab596f 0bf7c14 c8249ee 7b73a40 c8249ee 0bf7c14 4b029cb 0bf7c14 c8249ee 0bf7c14 4b029cb 0bf7c14 c8249ee 0bf7c14 4b029cb 14b75eb 7b73a40 c8249ee 7b73a40 c8249ee c5a9359 c8249ee afdedbf 14b75eb c8249ee f3d266c c8249ee 7b73a40 c8249ee 0bf7c14 31b1b39 9e5bf79 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide Viewer with Grok Chat</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<!-- Sidebar -->
<div class="sidebar">
<div class="prompt-icon" id="promptIcon">
<img src="prompt-icon.png" alt="Prompt Icon">
<span>Prompt</span>
</div>
<div class="video-icon" id="videoIcon">
<img src="video-icon.png" alt="Video Icon">
<span>Video</span>
</div>
</div>
<!-- Main Container -->
<div class="container">
<div class="top-bar">
<div class="nav-buttons">
<button id="prev-btn">← Previous</button>
<button id="next-btn">Next →</button>
</div>
<h1 id="slide-title">Slide Viewer</h1>
</div>
<div class="main">
<div class="content">
<img id="slide-image" src="images/01_mg.png" alt="Slide Image">
<div class="prompt-box" id="promptBox">
<textarea id="promptText"></textarea>
<button id="queryButton">Query Grok</button>
</div>
<div class="response-box" id="responseBox">
<div id="responseContent"></div>
</div>
</div>
</div>
<div class="video-overlay" id="videoOverlay" style="display: none;">
<iframe id="videoPlayer" src="" allowfullscreen></iframe>
<button class="close-button" id="closeVideo">×</button>
</div>
</div>
<script>
const BASE_URL = "https://api.x.ai/v1";
const API_KEY = "xai-hOb0j9QUXVVQMe86ULxWrvyWQQm2LqnWVdxh5hanvqsiVDsXcSPY9EA7YAM5uLCXaThgJscWxxFCHJFy";
// DOM elements
const slideTitle = document.getElementById('slide-title');
const slideImage = document.getElementById('slide-image');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const promptBox = document.getElementById('promptBox');
const promptText = document.getElementById('promptText');
const responseBox = document.getElementById('responseBox');
const responseContent = document.getElementById('responseContent');
const promptIcon = document.getElementById('promptIcon');
const videoIcon = document.getElementById('videoIcon');
const videoOverlay = document.getElementById('videoOverlay');
const videoPlayer = document.getElementById('videoPlayer');
const closeVideo = document.getElementById('closeVideo');
const queryButton = document.getElementById('queryButton');
let slides = [];
let currentIndex = 0;
// Define agentic workers
const agents = [
{
name: "Zoe Kim",
systemMessage: `
You are Zoe Kim, a Software Engineer specializing in full-stack development.
Discuss application development requirements in 1-2 sentences.
`,
},
{
name: "Alex Patel",
systemMessage: `
You are Alex Patel, a DevOps Engineer focusing on CI/CD pipelines.
Respond to Zoe’s suggestions in 1-2 sentences and discuss infrastructure adjustments.
`,
},
{
name: "Jack Dawson",
systemMessage: `
You are Jack Dawson, a QA and SRE specializing in system reliability.
Provide concise feedback on Alex’s design in 1-2 sentences, addressing risks or gaps.
`,
},
];
async function fetchSlides() {
try {
const response = await fetch('slide_config.json');
const data = await response.json();
slides = data.slides;
loadSlide(currentIndex);
} catch (error) {
console.error('Error loading slides:', error);
}
}
function loadSlide(index) {
if (!slides.length) return;
const slide = slides[index];
slideTitle.textContent = slide.id.replace('_', ' ');
slideImage.src = slide.image;
// Clear prompt and Grok info
promptBox.style.display = 'none';
responseBox.style.display = 'none';
responseContent.innerHTML = '';
// Reset video player
videoPlayer.src = '';
}
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
loadSlide(currentIndex);
});
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % slides.length;
loadSlide(currentIndex);
});
promptIcon.addEventListener('click', () => {
const slideText = slides[currentIndex]?.text || "No prompt text available.";
promptBox.style.display = promptBox.style.display === 'block' ? 'none' : 'block';
promptText.value = slideText; // Set prompt text from the slide config
});
videoIcon.addEventListener('click', () => {
const videoURL = slides[currentIndex]?.video || '';
if (videoURL) {
videoPlayer.src = videoURL;
videoOverlay.style.display = 'flex';
}
});
closeVideo.addEventListener('click', () => {
videoOverlay.style.display = 'none';
videoPlayer.src = '';
});
queryButton.addEventListener('click', async () => {
const userPrompt = promptText.value.trim();
if (!userPrompt) return;
responseBox.style.display = "block";
responseContent.innerHTML = "Loading...";
try {
let conversationLog = [];
const numIterations = 2; // Number of back-and-forth interactions
for (let iteration = 0; iteration < numIterations; iteration++) {
for (const agent of agents) {
const response = await fetch(`${BASE_URL}/chat/completions`, {
method: "POST",
headers: {
"Authorization": `Bearer ${API_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
model: "grok-beta",
messages: [
{ role: "system", content: agent.systemMessage },
{ role: "user", content: userPrompt },
...conversationLog.map((log) => ({
role: "assistant",
content: log.response,
})),
],
}),
});
if (!response.ok) {
throw new Error(`Error: ${response.statusText}`);
}
const data = await response.json();
const agentResponse = data.choices?.[0]?.message?.content || "Unexpected API response.";
conversationLog.push({
agent: agent.name,
response: agentResponse,
});
// Append response with styled agent name
responseContent.innerHTML += `
<p><span class="agent-name">${agent.name}:</span> ${agentResponse}</p>
`;
}
}
} catch (error) {
responseContent.textContent = `Error: ${error.message}`;
}
});
fetchSlides();
</script>
</body>
</html>
|