starting-ragchatbot-codebase/frontend/index.html at f1d63f71d8f174b7a2e54ea9c2fd313682b7f907 · https-deeplearning-ai/starting-ragchatbot-codebase · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>Course Materials Assistant</title>
    <link rel="stylesheet" href="style.css?v=9">
</head>
<body>
    <div class="container">
        <header>
            <h1>Course Materials Assistant</h1>
            <p class="subtitle">Ask questions about courses, instructors, and content</p>
        </header>

        <div class="main-content">
            <!-- Left Sidebar -->
            <aside class="sidebar">
                <!-- Course Stats -->
                <div class="sidebar-section">
                    <details class="stats-collapsible">
                        <summary class="stats-header">Courses</summary>
                        <div class="course-stats" id="courseStats">
                            <div class="stat-item">
                                <span class="stat-label">Number of courses:</span>
                                <span class="stat-value" id="totalCourses">-</span>
                            </div>
                            <div class="stat-item">
                                <div class="course-titles" id="courseTitles">
                                    <span class="loading">Loading...</span>
                                </div>
                            </div>
                        </div>
                    </details>
                </div>

                <!-- Suggested Questions -->
                <div class="sidebar-section">
                    <details class="suggested-collapsible">
                        <summary class="suggested-header">Try asking:</summary>
                        <div class="suggested-items">
                            <button class="suggested-item" data-question="What is the outline of the &quot;MCP: Build Rich-Context AI Apps with Anthropic&quot; course?">Outline of a course</button>
                            <button class="suggested-item" data-question="Are there any courses that include a Chatbot implementation?">Courses about Chatbot</button>
                            <button class="suggested-item" data-question="Are there any courses that explain what RAG is?">Courses explaining RAG</button>
                            <button class="suggested-item" data-question="What was covered in lesson 5 of the MCP course?">Details of a course's lesson</button>
                        </div>
                    </details>
                </div>

                <!-- Jay's Favorites -->
                <div class="sidebar-section">
                    <details class="suggested-collapsible">
                        <summary class="suggested-header">Jay's Favorites</summary>
                        <div class="suggested-items">
                            <a class="suggested-link" href="https://www.baltimoreravens.com" target="_blank" rel="noopener noreferrer">Baltimore Ravens</a>
                            <a class="suggested-link" href="https://www.mlb.com/red-sox" target="_blank" rel="noopener noreferrer">Boston Red Sox</a>
                        </div>
                    </details>
                </div>
            </aside>

            <!-- Main Chat Area -->
            <main class="chat-main">
                <div class="chat-container">
                    <div id="chatMessages" class="chat-messages"></div>
                    <div class="chat-input-container">
                        <input
                            type="text"
                            id="chatInput"
                            placeholder="Ask about courses, lessons, or specific content..."
                            autocomplete="off"
                        >
                        <button id="sendButton">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="22" y1="2" x2="11" y2="13"></line>
                                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                            </svg>
                        </button>
                    </div>
                </div>
            </main>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="script.js?v=9"></script>
</body>
</html>