<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/style.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="/static/script.js" defer></script>
<title>ASK-ANRG</title>
</head>
<body>
<div class="container">
<h1>ASK-ANRG</h1>
<label for="api-key-input">API Key:</label>
<input type="text" id="api-key-input" placeholder="Enter your API key...">
<div class="outside-container">
<div class="chat-box" id="chat-box">
<!-- Chat messages will be displayed here -->
</div>
</div>
<input type="text" id="user-input" placeholder="Type your message...">
<button id="send-btn">Send</button>
</div>
<div class="demo">
<div>
<h3>Project Description</h3>
<p>Objective: Create an AI Chatbot for research labs equipped to answer inquiries about lab history, members, research papers, projects, and more.</p>
<p>Motivation: Research lab websites (like anrg.usc.edu) are frequented by academics, recruiters, collaborators, students, and others seeking information about a lab, its members, and its research. We demonstrate some demo questions below.</p>
<p>With the recent advancements in Large Language Models (LLMs), such as ChatGPT, we can develop a bot that provides immediate, direct answers to these and other questions. This initiative will enhance user experience and efficiency, allowing easier access to the lab's information.</p>
</div>
<h3>Demo Questions</h3>
<p>First enter your own api-key and then ask question through user input or click on one of the demo questions</p>
<button class="question_btn">Give me a pub of J coleman</button>
<button class="question_btn">What is the position of J coleman (deprecated)</button>
<button class="question_btn">Give me a pub on neural network</button>
<button class="question_btn">Give me a pub published in 2023 (deprecated)</button>
<button class="question_btn">Give me a pub on math</button>
</div>
</body>
</html>