Skip to content

Commit

Permalink
Enhance channel chat template with new controls for data source and m…
Browse files Browse the repository at this point in the history 
…odel selection, and improve video listing layout
  • Loading branch information
Satish Surath committed Feb 8, 2025
1 parent 1471717 commit 9434559
Showing 1 changed file with 94 additions and 8 deletions.
102 changes: 94 additions & 8 deletions templates/channel_chat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,111 @@ <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Chat Section -->
<div class="lg:col-span-2 space-y-6">
<!-- Controls section remains unchanged -->

<!-- Chat Result with improved dark mode -->
<!-- Controls -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 space-y-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<!-- Data Source Selection -->
<div>
<label for="dataTypeSelect" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Data Source:
</label>
<select id="dataTypeSelect"
class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent">
<option value="comprehensive_notes">Comprehensive Notes</option>
<option value="concise_summary">Concise Summary</option>
<option value="key_topics">Key Topics</option>
<option value="important_takeaways">Important Takeaways</option>
<option value="transcript">Transcript</option>
</select>
</div>

<!-- Model Selection -->
<div>
<label for="modelSelect" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Model:
</label>
<select id="modelSelect"
class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent">
<!-- Dynamically populated -->
</select>
</div>
</div>
</div>

<!-- Chat Input -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<textarea id="userQuery"
rows="3"
placeholder="Enter your question..."
class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none mb-4"></textarea>
<button id="sendBtn"
class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Send
</button>
</div>

<!-- Chat Result -->
<div id="chatResult" class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 min-h-[200px]">
<div class="prose dark:prose-invert max-w-none">
<!-- Response will be inserted here -->
</div>
</div>
</div>

<!-- Rest of the template remains unchanged -->
<!-- Videos List -->
<div class="lg:col-span-1">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
Videos in this Channel
</h3>
<ul class="space-y-4">
{% for item in video_data %}
{% set vid = item.video %}
<li class="flex items-start space-x-2 text-gray-700 dark:text-gray-300">
<div class="flex items-center space-x-2 mt-1">
<!-- YouTube Link -->
<a href="https://www.youtube.com/watch?v={{ vid.video_id }}"
target="_blank"
class="text-gray-500 hover:text-red-500 dark:text-gray-400 dark:hover:text-red-400 transition-colors">
<svg class="w-5 h-5" viewBox="0 0 48 48">
<use href="#icon-summarizeYouTube" xlink:href="#icon-summarizeYouTube"></use>
</svg>
</a>
<!-- Chat Link -->
<a href="/chat-video/{{ vid.video_id }}"
class="text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 transition-colors">
<svg class="w-5 h-5" viewBox="0 -960 960 960">
<path fill="currentColor" d="M240-400h320v-80H240v80Zm0-120h480v-80H240v80Zm0-120h480v-80H240v80ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Z"/>
</svg>
</a>
</div>
<span class="flex-1 text-sm">{{ vid.title }}</span>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>

<script>
async function loadOllamaModels() {
// Model loading logic remains unchanged
try {
const resp = await fetch("/api/ollama/models");
const data = await resp.json();
const modelSelect = document.getElementById('modelSelect');
modelSelect.innerHTML = "";

data.data.forEach(m => {
const opt = document.createElement("option");
opt.value = m.id;
opt.textContent = m.id;
modelSelect.appendChild(opt);
});
} catch (err) {
console.error("Failed to load Ollama models:", err);
modelSelect.innerHTML = "<option value='phi4:latest'>phi4:latest</option>";
}
}

document.getElementById('sendBtn').addEventListener('click', async () => {
Expand All @@ -35,7 +123,7 @@ <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">
const dataType = document.getElementById('dataTypeSelect').value;
const chatDiv = document.getElementById('chatResult');

// Loading state with dark mode support
// Show loading state
chatDiv.innerHTML = `
<div class="flex items-center justify-center space-x-2 text-gray-500 dark:text-gray-400">
<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
Expand All @@ -57,8 +145,6 @@ <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">
})
});
const data = await resp.json();

// Updated response rendering with dark mode support
chatDiv.innerHTML = `
<div class="prose dark:prose-invert max-w-none">
<div class="text-gray-900 dark:text-gray-100">
Expand Down

0 comments on commit 9434559

Please sign in to comment.