feat: add integration and initialization scripts for website (Fortress PR #190-C)#202
Conversation
- Add comprehensive-demo.js for complete demo page functionality and user interactions - Add demo-initialization.js for application startup and module coordination These integration scripts bring together the core modules from PR #190-B to create the complete interactive website experience. Handles user workflows, API integration, and coordinated initialization of all website features. Fortress-compliant PR #190-C (2 files) - Integration & Initialization Final part of fortress split from original PR #190 for better review compliance. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Summary of ChangesHello @uelkerd, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request finalizes the development of the website's AI platform demo by integrating all previously separated components. It establishes the client-side logic for interacting with the SAMO API, managing user input, generating AI-powered content, and presenting analytical results. The changes ensure a cohesive, interactive, and production-ready user experience, complete with robust error handling and initialization sequences. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds a browser-based AI demo client (SAMOAPIClient) with unified request/retry/timeout handling for transcription, summarization, and emotion detection, plus mock fallbacks and UI helpers. Introduces a demo initialization script that wires UI events, state management, optional LayoutManager hooks, Bootstrap tooltip setup, and debug toggling on DOMContentLoaded. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant UI as Demo UI (Buttons/DOM)
participant C as SAMOAPIClient
participant V as VOICE_JOURNAL API
participant S as SUMMARIZE API
participant E as EMOTION API
U->>UI: Click Process
UI->>C: processCompleteWorkflow(audioFile, text)
alt Audio provided
C->>V: POST /voice_journal (FormData)
V-->>C: Transcription JSON
note over C: On failure or timeout → mock transcription
else No audio
note over C: Use provided text
end
C->>S: POST /summarize (JSON)
S-->>C: Summary JSON
note over C: On failure → mock summary
C->>E: POST /emotion (JSON)
E-->>C: Emotions JSON
note over C: On failure → mock emotions
C-->>UI: Aggregated results
UI-->>U: Render transcript, summary, emotions
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull Request Overview
This PR completes the fortress-compliant split of PR #190 by adding integration and initialization scripts that bring together all website functionality into a cohesive user experience. It introduces a comprehensive AI platform demo with voice transcription, text summarization, emotion detection, and API key management capabilities.
- Complete demo page functionality with API client, error handling, and user interactions
- Application startup and module coordination for seamless initialization
- Integration with SAMO API endpoints including emotion analysis, summarization, and transcription
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| website/js/demo-initialization.js | Handles DOM ready events, button listeners, and component initialization |
| website/js/comprehensive-demo.js | Main demo functionality with SAMO API client, processing workflows, and UI management |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
Here's the code health analysis summary for commits Analysis Summary
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces the core JavaScript logic for the comprehensive demo page and its initialization. The code is well-structured, particularly the SAMOAPIClient class which includes robust features like request retries with exponential backoff and timeout handling. The separation of the main demo logic from the initialization script is also a good practice.
My review focuses on improving maintainability, robustness, and user experience. Key suggestions include:
- Consolidating API client instances to avoid redundancy.
- Namespacing global functions to prevent polluting the global scope.
- Improving user feedback mechanisms during error states.
- Refactoring initialization logic for better clarity.
Overall, this is a solid contribution that lays the foundation for the website's interactive demo. The changes are substantial and well-implemented.
| document.addEventListener('DOMContentLoaded', function() { | ||
| console.log('✅ DOM loaded, initializing demo...'); | ||
| console.log('🔧 Using simple-demo-functions.js for chart implementation'); | ||
|
|
||
| // Initialize global API client | ||
| try { | ||
| window.apiClient = new SAMOAPIClient(); | ||
| console.log('✅ Global API client initialized'); | ||
| } catch (error) { | ||
| console.error('❌ Failed to initialize API client:', error); | ||
| } | ||
| }); | ||
|
|
||
| // Smooth scrolling for in-page navigation links | ||
| // Only applies to anchors within the main navigation to avoid interfering with external or footer anchors | ||
| document.addEventListener('DOMContentLoaded', () => { | ||
| document.querySelectorAll('nav a[href^="#"], .navbar a[href^="#"], #main-nav a[href^="#"]').forEach(anchor => { | ||
| anchor.addEventListener('click', function (e) { | ||
| // Only handle if the link is for the current page | ||
| if (location.pathname === anchor.pathname && location.hostname === anchor.hostname) { | ||
| e.preventDefault(); | ||
| const href = this.getAttribute('href'); | ||
| if (!href) return; | ||
| const target = document.querySelector(href); | ||
| if (target) { | ||
| target.scrollIntoView({ | ||
| behavior: 'smooth', | ||
| block: 'start' | ||
| }); | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
This file contains two separate DOMContentLoaded event listeners. While this works, it can make the initialization flow harder to follow and manage. Combining them into a single listener would improve code clarity and ensure a predictable execution order for all initialization logic within this file.
document.addEventListener('DOMContentLoaded', function() {
console.log('✅ DOM loaded, initializing demo...');
console.log('🔧 Using simple-demo-functions.js for chart implementation');
// Initialize global API client
try {
window.apiClient = new SAMOAPIClient();
console.log('✅ Global API client initialized');
} catch (error) {
console.error('❌ Failed to initialize API client:', error);
}
// Smooth scrolling for in-page navigation links
document.querySelectorAll('nav a[href^="#"], .navbar a[href^="#"], #main-nav a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
// Only handle if the link is for the current page
if (location.pathname === anchor.pathname && location.hostname === anchor.hostname) {
e.preventDefault();
const href = this.getAttribute('href');
if (!href) return;
const target = document.querySelector(href);
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
});
});
});| } else { | ||
| console.error('❌ processText function not available'); | ||
| } |
There was a problem hiding this comment.
When a required function like processText is not available, the error is only logged to the console. This provides no feedback to the user, who will just see a non-functional button. It would be a better user experience to display a visible error message on the page. This applies to the other error-handling cases in this file as well.
} else {
console.error('❌ processText function not available');
alert('Error: Core demo functionality is missing. Please reload the page.');
}![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
website/js/comprehensive-demo.js (1)
1-1317: Ensure presence ofLayoutManager, state-management helpers, Bootstrap, andSAMO_CONFIG
LayoutManageris used extensively (e.g.addActiveRequest,showProcessingState,resetToInitialState) but no implementation or import was found; define or import it before use.- In
website/js/demo-initialization.js,processTextWithStateManagement,clearAllWithStateManagement, andupdateApiKeyButtonStatusare referenced yet not defined; add their definitions or remove these fallbacks.- No Bootstrap assets or
data-bs-toggle="tooltip"attributes were detected in any HTML—ensure Bootstrap CSS/JS is loaded for UI components.window.SAMO_CONFIGis referenced in JS but not provisioned anywhere in HTML/JS/JSON; inject it or supply a fallback configuration to avoid runtime warnings.
🧹 Nitpick comments (10)
website/js/demo-initialization.js (4)
20-31: Reference optional globals via window to be module-safeAccessing undeclared identifiers works with typeof but subsequent calls can fail under modules/strict mode. Prefer window.* for both checks and invocations.
- if (typeof processTextWithStateManagement === 'function') { - processTextWithStateManagement(); + if (typeof window.processTextWithStateManagement === 'function') { + window.processTextWithStateManagement(); } else if (typeof window.processText === 'function') {- if (typeof clearAllWithStateManagement === 'function') { - clearAllWithStateManagement(); + if (typeof window.clearAllWithStateManagement === 'function') { + window.clearAllWithStateManagement(); } else if (typeof window.clearAll === 'function') {- if (typeof updateApiKeyButtonStatus === 'function') { - updateApiKeyButtonStatus(); + if (typeof window.updateApiKeyButtonStatus === 'function') { + window.updateApiKeyButtonStatus(); }Also applies to: 85-96, 71-73
49-51: Avoid enumerating window for loggingObject.keys(window) can be huge and noisy. Log capability, not inventory.
- console.log('🔍 Available functions:', Object.keys(window).filter(key => key.includes('generate'))); + console.log('🔍 generateSampleText present:', typeof window.generateSampleText === 'function');
7-9: Make initialization idempotent to prevent duplicate listenersIf the script is loaded twice, this avoids double-binding.
-document.addEventListener('DOMContentLoaded', function() { +document.addEventListener('DOMContentLoaded', function() { + if (window.__demoInitDone) return; + window.__demoInitDone = true;
118-126: Minor: remove unused tooltipList variableIt’s scoped only for logging length; no need to predeclare outside the block.
- let tooltipList = []; if (window.bootstrap) { const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); - tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { + const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); console.log('✅ Bootstrap tooltips initialized:', tooltipList.length);website/js/comprehensive-demo.js (6)
888-895: Likewise for summarization: reuse global client and call summarizeText()Ensures consistent timeout/retry behavior and mock fallback on 401/5xx.
- // Create API client instance for proper timeout and error handling - const apiClient = new SAMOAPIClient(); - console.log('📝 API Base URL:', apiClient.baseURL); - console.log('📝 Summarization endpoint:', apiClient.endpoints.SUMMARIZE); - console.log('📝 Full API URL:', `${apiClient.baseURL}${apiClient.endpoints.SUMMARIZE}`); - - const data = await apiClient.makeRequest(apiClient.endpoints.SUMMARIZE, { text: text }, 'POST'); + const apiClient = window.apiClient || (window.apiClient = new SAMOAPIClient()); + const data = await apiClient.summarizeText(text);
175-186: Broaden network error detection to retry on “Failed to fetch”Fetch often throws TypeError: Failed to fetch; current check may skip retry.
- if ((error.name === 'AbortError' || abortReason === 'timeout' || error.message.includes('timeout') || error.message.includes('network')) && attemptsLeft > 1) { + const msg = String(error?.message || '').toLowerCase(); + if ((error.name === 'AbortError' || abortReason === 'timeout' || msg.includes('timeout') || msg.includes('network') || msg.includes('failed to fetch')) && attemptsLeft > 1) {
77-81: Set Accept header for all requestsSome APIs require explicit Accept header on POST.
const config = { method, - headers: {} + headers: { 'Accept': 'application/json' } };
247-248: Remove unused variable or consistently use itsummaryLength is computed but unused. Simplify.
- const words = text.split(' '); - const summaryLength = Math.max(15, Math.floor(words.length * 0.4)); + const words = text.split(' ');Also applies to: 258-264
641-671: Optionally add updateApiKeyButtonStatus helper to sync button UIdemo-initialization.js calls updateApiKeyButtonStatus() if present. Provide it here and export.
function manageApiKey() { @@ - alert('✅ API Key saved successfully'); + alert('✅ API Key saved successfully'); + if (typeof updateApiKeyButtonStatus === 'function') updateApiKeyButtonStatus(); @@ } } + +// Reflect API key state on the button, if present +function updateApiKeyButtonStatus() { + const btn = document.getElementById('apiKeyBtn'); + if (!btn) return; + const hasKey = !!(sessionStorage.getItem('openai_api_key') || localStorage.getItem('openai_api_key')); + btn.textContent = hasKey ? 'Change API Key' : 'Manage API Key'; + btn.classList.toggle('btn-success', hasKey); + btn.classList.toggle('btn-outline-secondary', !hasKey); +} +window.updateApiKeyButtonStatus = updateApiKeyButtonStatus;
426-437: Minor: don’t overwrite an existing global clientAvoid replacing an already-created client if scripts re-fire.
- window.apiClient = new SAMOAPIClient(); - console.log('✅ Global API client initialized'); + if (!window.apiClient) { + window.apiClient = new SAMOAPIClient(); + console.log('✅ Global API client initialized'); + } else { + console.log('ℹ️ Global API client already initialized'); + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
website/js/comprehensive-demo.js(1 hunks)website/js/demo-initialization.js(1 hunks)
…ng to prevent ReferenceError
… fallbacks and tracking
- Combine multiple DOMContentLoaded listeners into single listener for clarity - Remove redundant setTimeout loading messages (already handled by addToProgressConsole) - Use global API client instance instead of creating new instances - Namespace functions under window.SamoDemo to avoid global pollution - Add user-visible error alerts when core functions are unavailable
demo-initialization.js: - Reference optional globals via window for module safety - Avoid enumerating window object for cleaner logging - Make initialization idempotent to prevent duplicate listeners - Remove unused tooltipList variable declaration comprehensive-demo.js: - Reuse global API client for summarization calls - Broaden network error detection to include 'Failed to fetch' - Add Accept header to all API requests - Remove unused summaryLength variable and inline calculation - Add updateApiKeyButtonStatus helper function - Prevent overwriting existing global API client
Summary
🏰 Fortress-Compliant Split (2/9 files) - Integration & Initialization
This is the final of three fortress-compliant PRs splitting the original PR #190. This PR focuses specifically on integration and initialization scripts that bring together all website functionality into a cohesive user experience.
Files in this PR (2 files):
website/js/comprehensive-demo.js- Complete demo page functionality with user interactions and API integrationwebsite/js/demo-initialization.js- Application startup and module coordination for seamless initializationKey Features:
Fortress Strategy:
This is PR #190-C (final) of a three-part fortress split:
Testing Checklist:
Dependencies:
Technical Achievements:
Integration Notes:
When all three PRs are merged in sequence, they provide:
🎯 Final PR: This completes the fortress-compliant split of original PR #190.
🤖 Generated with Claude Code
Summary by CodeRabbit