Hugging Face's logo

Spaces:
OrganizedProgrammers
/
RAGnarok
Sleeping

App Files Community
RAGnarok
File size: 5,086 Bytes 
8b6f532
 
 
 
 
049d71c
8b6f532
 
 
 
 
43b72e8
8b6f532
 
 
 
 
 
 
049d71c
8b6f532
 
 
 
 
 
049d71c
8b6f532
 
 
 
 
 
049d71c
8b6f532
 
 
 
 
049d71c
8b6f532
 
 
 
 
 
 
 
049d71c
8b6f532
 
 
049d71c
8b6f532
 
 
049d71c
8b6f532
 
 
 
 
 
 
049d71c
8b6f532
 
 
 
 
 
 
 
 
 
049d71c
8b6f532
 
 
 
 
 
049d71c
8b6f532
049d71c
8b6f532
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
049d71c
8b6f532
 
43b72e8
8b6f532
 
 
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
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAGnarok | Chat with the specs</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="/static/styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.12/marked.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <header class="header">
            <div class="logo">
                <span class="material-icons">search</span>
                <h1>RAGnarok - Chat with the specs</h1>
            </div>
        </header>

        <!-- Search Section -->
        <section id="search-section" class="search-section">
            <div class="search-container">
                <h2>Search specifications</h2>
                <form id="search-form" class="search-form">
                    <div class="input-group">
                        <input type="text" id="keyword" placeholder="Entrez vos mots-clés..." required>
                        <span class="material-icons">search</span>
                    </div>
                    <div class="threshold-group">
                        <label for="threshold">Similarity Threshold :</label>
                        <input type="range" id="threshold" min="0" max="100" step="1" value="70">
                        <span id="threshold-value"></span>
                    </div>
                    <button type="submit" class="search-btn">
                        <span class="material-icons">search</span>
                        Search
                    </button>
                </form>
            </div>
        </section>

        <!-- Results Section -->
        <section id="results-section" class="results-section hidden">
            <div class="results-header">
                <h3>Search result</h3>
                <div class="selection-controls">
                    <button id="select-all" class="control-btn">
                        <span class="material-icons">select_all</span>
                        Select All
                    </button>
                    <button id="unselect-all" class="control-btn">
                        <span class="material-icons">deselect</span>
                        Unselect All
                    </button>
                </div>
            </div>
            <div id="results-container" class="results-container"></div>
            <div class="chat-launch">
                <button id="start-chat" class="chat-btn" disabled>
                    <span class="material-icons">chat</span>
                    Unleash the RAGnarok !
                </button>
            </div>
        </section>

        <!-- ChatBot Section -->
        <section id="chat-section" class="chat-section hidden">
            <div class="chat-header">
                <h3>ChatBot Assistant</h3>
                <button id="back-to-search" class="back-btn">
                    <span class="material-icons">arrow_back</span>
                    Return to search
                </button>
            </div>
            <div class="chat-container">
                <div id="chat-messages" class="chat-messages"></div>
                <form id="chat-form" class="chat-form">
                    <div class="chat-input-group">
                        <input type="text" id="chat-input" placeholder="Enter your query here ..." required>
                        <select id="model-select">
                            <option value="gemini-2.5-flash">Gemini 2.5 Flash</option>
                            <option value="gemini-2.0-flash">Gemini 2.0 Flash</option>
                            <option value="gemma-3-27b-it">Gemma 3</option>
                            <option value="gemma-3n-e4b-it">Gemma 3n</option>
                        </select>
                        <button type="submit">
                            <span class="material-icons">send</span>
                        </button>
                    </div>
                </form>
            </div>
        </section>
    </div>

    <!-- Modal for document content -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modal-title"></h4>
                <button class="modal-close">
                    <span class="material-icons">close</span>
                </button>
            </div>
            <div id="modal-body" class="modal-body"></div>
        </div>
    </div>

    <!-- Loading overlay -->
    <div id="loading" class="loading hidden">
        <div class="spinner"></div>
        <p>Searching ...</p>
    </div>

    <script type="module" src="/static/script.js"></script>
</body>
</html>