Spaces:

The-Ultimate-RAG-HF
/

test

Sleeping

App Files Files Community

Andrchest commited on Jun 15

Commit

0a008db

1 Parent(s): aab0e20

change app 5

Browse files

Files changed (8) hide show

.idea/inspectionProfiles/Project_Default.xml +15 -0
.idea/inspectionProfiles/profiles_settings.xml +6 -0
.idea/misc.xml +7 -0
.idea/modules.xml +8 -0
.idea/test.iml +10 -0
.idea/vcs.xml +6 -0
templates/base.html +284 -0
templates/index.html +282 -0

.idea/inspectionProfiles/Project_Default.xml ADDED Viewed

	@@ -0,0 +1,15 @@

+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="PyPackageRequirementsInspection" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="ignoredPackages">
+        <value>
+          <list size="2">
+            <item index="0" class="java.lang.String" itemvalue="networkx" />
+            <item index="1" class="java.lang.String" itemvalue="numpy" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>

.idea/inspectionProfiles/profiles_settings.xml ADDED Viewed

	@@ -0,0 +1,6 @@

+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

.idea/misc.xml ADDED Viewed

	@@ -0,0 +1,7 @@

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Black">
+    <option name="sdkName" value="Python 3.10 (test) (2)" />
+  </component>
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.10 (test) (2)" project-jdk-type="Python SDK" />
+</project>

.idea/modules.xml ADDED Viewed

	@@ -0,0 +1,8 @@

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/test.iml" filepath="$PROJECT_DIR$/.idea/test.iml" />
+    </modules>
+  </component>
+</project>

.idea/test.iml ADDED Viewed

	@@ -0,0 +1,10 @@

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.venv" />
+    </content>
+    <orderEntry type="jdk" jdkName="Python 3.10 (test) (2)" jdkType="Python SDK" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml ADDED Viewed

	@@ -0,0 +1,6 @@

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

templates/base.html ADDED Viewed

	@@ -0,0 +1,284 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RAG System Interface</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+        }
+        body {
+            display: flex;
+            height: 100vh;
+            background-color: #111827;
+        }
+        .sidebar {
+            width: 260px;
+            background-color: #1F2937;
+            padding: 20px;
+            overflow-y: auto;
+        }
+        .new-chat-btn {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 15px;
+            border-radius: 8px;
+            background-color: #34D399;
+            cursor: pointer;
+            margin-bottom: 20px;
+            font-size: 14px;
+            color: #333;
+        }
+        .new-chat-btn:hover {
+            background-color: #90e2c4;
+        }
+        .time-section {
+            margin-bottom: 20px;
+        }
+        .time-header {
+            font-size: 12px;
+            color: #666;
+            margin-bottom: 10px;
+            font-weight: 500;
+        }
+        .chat-item {
+            padding: 8px 10px;
+            border-radius: 6px;
+            margin-bottom: 5px;
+            color: #eee;
+            cursor: pointer;
+            font-size: 14px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            border-width: 1px;
+            border-color: #bec0c4;
+        }
+        .chat-item:hover {
+            background-color: #242e3d;
+        }
+        .chat-item-selected {
+            padding: 8px 10px;
+            border-radius: 6px;
+            margin-bottom: 5px;
+            color: #111827; /* Dark text for better contrast on light green */
+            background-color: #34D399; /* Your signature green color */
+            cursor: pointer;
+            font-size: 14px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            border: 1px solid #2BB389; /* Slightly darker green border */
+            font-weight: 500; /* Slightly bolder text like your user messages */
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+        }
+        /* .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        } */
+        .chat-container {
+            flex: 1;
+            padding: 30px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 15px; /* This controls the space between messages */
+        }
+        .message {
+            max-width: 1000px;
+            width: 100%;
+            margin: 0 auto;
+        }
+        .user-message {
+            background-color: #34D399;
+            color: #000;
+            padding: 12px 16px;
+            border-radius: 12px;
+            font-weight: 500;
+            display: inline-block;
+            max-width: 80%;
+            float: right;
+            clear: both;
+            margin-bottom: 5px;
+        }
+        .bot-message {
+            background-color: #44444C;
+            color: white;
+            padding: 16px;
+            border-radius: 12px;
+            line-height: 1.6;
+            max-width: 80%;
+            float: left;
+            clear: both;
+        }
+        .bot-message h1 {
+            font-size: 24px;
+            margin-bottom: 15px;
+        }
+        .sources {
+            font-size: 13px;
+            color: #666;
+            margin-top: 20px;
+            padding-top: 15px;
+            border-top: 1px solid #eee;
+        }
+        .database-info {
+            text-align: center;
+            font-size: 13px;
+            color: #999;
+            margin: 20px 0;
+        }
+        .link {
+            color: rgb(62, 62, 206)
+        }
+        .plain-text {
+            color: white;
+        }
+        .input-container {
+            padding: 16px;
+            background-color: #111827;
+            border-top: 1px solid #2d3748;
+        }
+        .input-box {
+            max-width: 800px;
+            margin: 0 auto;
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+        input[type="text"] {
+            width: 100%;
+            padding: 12px 48px 12px 16px;
+            border: 1px solid #4b5563;
+            border-radius: 12px;
+            font-size: 15px;
+            outline: none;
+            background-color: #1f2937;
+            color: white;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            transition: all 0.2s ease;
+        }
+        input[type="text"]:focus {
+            border-color: #6b7280;
+            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+        }
+        .send-button {
+            position: absolute;
+            right: 12px;
+            background: none;
+            border: none;
+            color: #9ca3af;
+            cursor: pointer;
+            padding: 4px;
+            border-radius: 6px;
+            transition: all 0.2s ease;
+        }
+        .send-button:hover {
+            color: #d1d5db;
+            background-color: rgba(255, 255, 255, 0.05);
+        }
+        .send-button svg {
+            display: block;
+        }
+        .info-code {
+            position: absolute;
+            right: 15px;
+            bottom: -25px;
+            font-size: 12px;
+            color: #999;
+        }
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center; /* Add this for vertical centering */
+            align-items: center; /* Add this for horizontal centering */
+            padding: 20px; /* Optional: adds some spacing */
+        }
+        .rag-container {
+            text-align: center;
+            max-width: 600px;
+            width: 90%;
+            margin: 0 auto; /* Ensures horizontal centering */
+        }
+        .rag-title {
+            font-size: 2.5rem;
+            font-weight: 800;
+            margin-bottom: 0.5rem;
+            color: white; /* Changed to white for visibility on dark bg */
+        }
+        .rag-subtitle {
+            font-size: 1.1rem;
+            color: #9ca3af; /* Lighter color for better contrast */
+            margin-bottom: 2rem;
+            font-weight: 400;
+        }
+    </style>
+</head>
+<body>
+    <div class="sidebar">
+        <button class="new-chat-btn" onclick="location.href='/'">
+            <span>Add new chat</span>
+        </button>
+        <div class="time-section">
+            <div class="time-header">TODAY</div>
+            <div class="chat-item" onclick="location.href='/chat_example'">Explanation of RAG system</div>
+            <div class="chat-item" onclick="location.href='/chat_example'">IEEE citation format guidell...</div>
+        </div>
+        <div class="time-section">
+            <div class="time-header">LAST WEEK</div>
+            <div class="chat-item" onclick="location.href='/chat_example'">System test: explanation of...</div>
+        </div>
+        <div class="time-section">
+            <div class="time-header">LAST MONTH</div>
+            <div class="chat-item" onclick="location.href='/chat_example'">How rich is Elon Musk?</div>
+            <div class="chat-item" onclick="location.href='/chat_example'">Tesla: main pros and cons t...</div>
+        </div>
+    </div>
+    <div class="main-content">
+        <div class="rag-container">
+            <h1 class="rag-title">The Ultimate RAG</h1>
+            <p class="rag-subtitle">ask anything...</p>
+        </div>
+    </div>
+</body>
+</html>

templates/index.html ADDED Viewed

	@@ -0,0 +1,282 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RAG System Interface</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+        }
+        body {
+            display: flex;
+            height: 100vh;
+            background-color: #111827;
+        }
+        .sidebar {
+            width: 260px;
+            background-color: #1F2937;
+            padding: 20px;
+            overflow-y: auto;
+        }
+        .new-chat-btn {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 15px;
+            border-radius: 8px;
+            background-color: #34D399;
+            cursor: pointer;
+            margin-bottom: 20px;
+            font-size: 14px;
+            color: #333;
+        }
+        .new-chat-btn:hover {
+            background-color: #90e2c4;
+        }
+        .time-section {
+            margin-bottom: 20px;
+        }
+        .time-header {
+            font-size: 12px;
+            color: #666;
+            margin-bottom: 10px;
+            font-weight: 500;
+        }
+        .chat-item {
+            padding: 8px 10px;
+            border-radius: 6px;
+            margin-bottom: 5px;
+            color: #eee;
+            cursor: pointer;
+            font-size: 14px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            border-width: 1px;
+            border-color: #bec0c4;
+        }
+        .chat-item:hover {
+            background-color: #242e3d;
+        }
+        .chat-item-selected {
+            padding: 8px 10px;
+            border-radius: 6px;
+            margin-bottom: 5px;
+            color: #111827; /* Dark text for better contrast on light green */
+            background-color: #34D399; /* Your signature green color */
+            cursor: pointer;
+            font-size: 14px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            border: 1px solid #2BB389; /* Slightly darker green border */
+            font-weight: 500; /* Slightly bolder text like your user messages */
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+        }
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
+        .chat-container {
+            flex: 1;
+            padding: 30px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 15px; /* This controls the space between messages */
+        }
+        .message {
+            max-width: 1000px;
+            width: 100%;
+            margin: 0 auto;
+        }
+        .user-message {
+            background-color: #34D399;
+            color: #000;
+            padding: 12px 16px;
+            border-radius: 12px;
+            font-weight: 500;
+            display: inline-block;
+            max-width: 80%;
+            float: right;
+            clear: both;
+            margin-bottom: 5px;
+        }
+        .bot-message {
+            background-color: #44444C;
+            color: white;
+            padding: 16px;
+            border-radius: 12px;
+            line-height: 1.6;
+            max-width: 80%;
+            float: left;
+            clear: both;
+        }
+        .bot-message h1 {
+            font-size: 24px;
+            margin-bottom: 15px;
+        }
+        .sources {
+            font-size: 13px;
+            color: #666;
+            margin-top: 20px;
+            padding-top: 15px;
+            border-top: 1px solid #eee;
+        }
+        .database-info {
+            text-align: center;
+            font-size: 13px;
+            color: #999;
+            margin: 20px 0;
+        }
+        .link {
+            color: rgb(62, 62, 206)
+        }
+        .plain-text {
+            color: white;
+        }
+        .input-container {
+            padding: 16px;
+            background-color: #111827;
+            border-top: 1px solid #2d3748;
+        }
+        .input-box {
+            max-width: 800px;
+            margin: 0 auto;
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+        input[type="text"] {
+            width: 100%;
+            padding: 12px 48px 12px 16px;
+            border: 1px solid #4b5563;
+            border-radius: 12px;
+            font-size: 15px;
+            outline: none;
+            background-color: #1f2937;
+            color: white;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            transition: all 0.2s ease;
+        }
+        input[type="text"]:focus {
+            border-color: #6b7280;
+            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+        }
+        .send-button {
+            position: absolute;
+            right: 12px;
+            background: none;
+            border: none;
+            color: #9ca3af;
+            cursor: pointer;
+            padding: 4px;
+            border-radius: 6px;
+            transition: all 0.2s ease;
+        }
+        .send-button:hover {
+            color: #d1d5db;
+            background-color: rgba(255, 255, 255, 0.05);
+        }
+        .send-button svg {
+            display: block;
+        }
+        .info-code {
+            position: absolute;
+            right: 15px;
+            bottom: -25px;
+            font-size: 12px;
+            color: #999;
+        }
+    </style>
+</head>
+<body>
+    <div class="sidebar">
+        <button class="new-chat-btn" onclick="location.href='/'">
+            <span>Add new chat</span>
+        </button>
+        <div class="time-section">
+            <div class="time-header">TODAY</div>
+            <div class="chat-item-selected">Explanation of RAG system</div>
+            <div class="chat-item">IEEE citation format guidell...</div>
+        </div>
+        <div class="time-section">
+            <div class="time-header">LAST WEEK</div>
+            <div class="chat-item">System test: explanation of...</div>
+        </div>
+        <div class="time-section">
+            <div class="time-header">LAST MONTH</div>
+            <div class="chat-item">How rich is Elon Musk?</div>
+            <div class="chat-item">Tesla: main pros and cons t...</div>
+        </div>
+    </div>
+    <div class="main-content">
+        <div class="chat-container">
+            <div class="message">
+                <div class="user-message">
+                    <p>Explain, please, what is RAG?</p>
+                </div>
+            </div>
+            <div class="message">
+                <div class="bot-message">
+                    <h1 class="plain-text">RAG stands for Retrieval-Augmented Generation.</h1>
+                    <p class="plain-text">Think of it as giving your AI a specific relevant documents (or chunks) that it can quickly scan through to find relevant information before answering your questions.</p>
+                    <p class="plain-text">So, instead of searching the entire database (which might not fit in the LLM models context window, or even if it fits it will consume a lot of tokens to answers) we give the LLM only the relevant documents (chunks) that it needs to look up in order to answer user question.</p>
+                    <h3 class="plain-text">Sources:</h3>
+                    <div class="plain-text">1. <a href="#" class="link">«About RAG»</a>, p. 21, lines: 32-41</div>
+                </div>
+            </div>
+        </div>
+        <div class="input-container">
+            <div class="input-box">
+                <input type="text" placeholder="Ask your question here">
+                <button class="send-button">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <path d="M7 11L12 6L17 11M12 18V7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</body>
+</html>