Skip to content

Commit

Permalink
edited frontend so it would fit auto agent generation
Browse files Browse the repository at this point in the history
  • Loading branch information
@gregdrizz
gregdrizz committed Jul 23, 2023
1 parent 66c0c77 commit 6c21edb
Showing 1 changed file with 132 additions and 86 deletions.
218 changes: 132 additions & 86 deletions client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/site/styles.css" />
<link rel="stylesheet" href="/site/styles.css"/>
<style>
.avatar {
width: 60px;
Expand All @@ -27,108 +27,154 @@
flex-direction: column;
align-items: center;
}

.agent-choices {
display: none;
}

.btn-show {
display: none;
}
</style>
</head>

<body>

<section class="landing">
<div class="max-w-5xl mx-auto text-center">
<h1 class="text-4xl font-extrabold mx-auto lg:text-7xl">
Say Goodbye to <br>
<span
<section class="landing">
<div class="max-w-5xl mx-auto text-center">
<h1 class="text-4xl font-extrabold mx-auto lg:text-7xl">
Say Goodbye to <br>
<span
style="background-image:linear-gradient(to right, #9867F0, #ED4E50); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Hours
of Research</span>
</h1>
<p class="max-w-5xl mx-auto text-gray-600 mt-8" style="font-size:20px">
Say Hello to GPT Researcher, your AI mate for rapid insights and comprehensive research. GPT Researcher
takes care of everything from accurate source gathering to organization of research results - all in one
platform designed to make your research process a breeze.
</p>
<a href="#form" class="btn btn-primary">Get Started</a>
</div>
</section>
</h1>
<p class="max-w-5xl mx-auto text-gray-600 mt-8" style="font-size:20px">
Say Hello to GPT Researcher, your AI mate for rapid insights and comprehensive research. GPT Researcher
takes care of everything from accurate source gathering to organization of research results - all in one
platform designed to make your research process a breeze.
</p>
<a href="#form" class="btn btn-primary">Get Started</a>
</div>
</section>

<main class="container" id="form">
<form method="POST" class="mt-3" onsubmit="GPTResearcher.startResearch(); return false;">
<div class="form-group">
<label for="task" class="agent-question">What would you like me to research next?</label>
<input type="text" id="task" name="task" class="form-control" required>
</div>
<div class="form-group">
<label for="agent">Select your agent:</label>
<div class="row">
<div class="col agent-item">
<label for="autoAgent"><img src="/static/defaultAgentAvatar.JPG" class="avatar" alt="Auto Agent"></label>
<div class="agent-name"><input type="radio" name="agent" id="autoAgent"
value="Auto Agent">Auto Agent</div>
</div>
<div class="col agent-item">
<label for="defaultAgent"><img src="/static/defaultAgentAvatar.JPG" class="avatar" alt="Default Agent"></label>
<div class="agent-name"><input type="radio" name="agent" id="defaultAgent"
value="Default Agent">Default Agent</div>
</div>
<div class="col agent-item">
<label for="businessAnalystAgent"><img src="/static/businessAnalystAgentAvatar.png"
class="avatar" alt="Business Analyst Agent"></label>
<div class="agent-name"><input type="radio" name="agent" id="businessAnalystAgent"
value="Business Analyst Agent">Business Analyst Agent</div>
</div>
<div class="col agent-item">
<label for="financeAgent"><img src="/static/financeAgentAvatar.png" class="avatar" alt="Finance Agent"></label>
<div class="agent-name"><input type="radio" name="agent" id="financeAgent" value="Finance Agent"
required>Finance Agent</div>
</div>
<div class="col agent-item">
<label for="travelAgent"><img src="/static/travelAgentAvatar.png" class="avatar" alt="Travel Agent"></label>
<div class="agent-name"><input type="radio" name="agent" id="travelAgent"
value="Travel Agent">Travel Agent</div>
</div>
<div class="col agent-item">
<label for="academicResearchAgent"><img src="/static/academicResearchAgentAvatar.png"
class="avatar" alt="Academic Research Agent"></label>
<div class="agent-name"><input type="radio" name="agent" id="academicResearchAgent"
value="Academic Research Agent">Academic Research Agent</div>
<main class="container" id="form">
<form method="POST" class="mt-3" onsubmit="GPTResearcher.startResearch(); return false;">
<div class="form-group">
<label for="task" class="agent-question">What would you like me to research next?</label>
<input type="text" id="task" name="task" class="form-control" required>
</div>
<div class="form-group">
<label for="agent">Select your agent:</label>
<div class="row">
<div class="col agent-item" id="autoAgentDiv">
<label for="autoAgent"><img src="/static/defaultAgentAvatar.JPG" class="avatar"
alt="Auto Agent"></label>
<div class="agent-name"><input type="radio" name="agent" id="autoAgent"
value="Auto Agent" checked>Auto Agent
</div>
<div class="col agent-item">
<label for="computerSecurityAnalyst"><img src="/static/computerSecurityAnalystAvatar.png"
class="avatar" alt="Computer Security Analyst Agent"></label>
<div class="agent-name"><input type="radio" name="agent" id="computerSecurityAnalyst"
value="Computer Security Analyst Agent">Computer Security Analyst Agent</div>
<p class="mt-2 text-center" style="font-size: 0.8rem;">An agent tailored specifically to your task
will be generated to provide the most precise and relevant research results.</p>

</div>

<div class="agent-choices">
<div class="row">
<div class="col agent-item">
<label for="businessAnalystAgent"><img src="/static/businessAnalystAgentAvatar.png"
class="avatar" alt="Business Analyst Agent"></label>
<div class="agent-name"><input type="radio" name="agent" id="businessAnalystAgent"
value="Business Analyst Agent">Business Analyst Agent
</div>
</div>
<div class="col agent-item">
<label for="financeAgent"><img src="/static/financeAgentAvatar.png" class="avatar"
alt="Finance Agent"></label>
<div class="agent-name"><input type="radio" name="agent" id="financeAgent"
value="Finance Agent"
required>Finance Agent
</div>
</div>
<div class="col agent-item">
<label for="travelAgent"><img src="/static/travelAgentAvatar.png" class="avatar"
alt="Travel Agent"></label>
<div class="agent-name"><input type="radio" name="agent" id="travelAgent"
value="Travel Agent">Travel Agent
</div>
</div>
<div class="col agent-item">
<label for="academicResearchAgent"><img src="/static/academicResearchAgentAvatar.png"
class="avatar"
alt="Academic Research Agent"></label>
<div class="agent-name"><input type="radio" name="agent" id="academicResearchAgent"
value="Academic Research Agent">Academic Research Agent
</div>
</div>
<div class="col agent-item">
<label for="computerSecurityAnalyst"><img src="/static/computerSecurityAnalystAvatar.png"
class="avatar"
alt="Computer Security Analyst Agent"></label>
<div class="agent-name"><input type="radio" name="agent" id="computerSecurityAnalyst"
value="Computer Security Analyst Agent">Computer Security
Analyst Agent
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="report_type" class="agent-question">What type of report would you like me to generate?</label>
<select name="report_type" class="form-control" required>
<option value="research_report">Research Report</option>
<option value="resource_report">Resource Report</option>
<option value="outline_report">Outline Report</option>
</select>
</div>
<input type="submit" value="Research" class="btn btn-primary button-padding">
</form>

<div class="margin-div">
<h2>Agent Output</h2>
<div id="output"></div>
</div>
<button type="button" id="btnChoose" class="btn btn-secondary mt-3">Choose an Agent</button>
<button type="button" id="btnShowAuto" class="btn btn-secondary mt-3 btn-show">Auto Agent</button>
</div>
<div class="margin-div">
<h2>Research Report</h2>
<div id="reportContainer"></div>
<button onclick="copyToClipboard()" class="btn btn-secondary mt-3">Copy to clipboard</button>
<a id="downloadLink" href="#" class="btn btn-secondary mt-3" target="_blank">Download as PDF</a>
<div class="form-group">
<label for="report_type" class="agent-question">What type of report would you like me to generate?</label>
<select name="report_type" class="form-control" required>
<option value="research_report">Research Report</option>
<option value="resource_report">Resource Report</option>
<option value="outline_report">Outline Report</option>
</select>
</div>
</main>
<input type="submit" value="Research" class="btn btn-primary button-padding">
</form>

<div class="margin-div">
<h2>Agent Output</h2>
<div id="output"></div>
</div>
<div class="margin-div">
<h2>Research Report</h2>
<div id="reportContainer"></div>
<button onclick="copyToClipboard()" class="btn btn-secondary mt-3">Copy to clipboard</button>
<a id="downloadLink" href="#" class="btn btn-secondary mt-3" target="_blank">Download as PDF</a>
</div>
</main>

<footer>
<p>GPT Researcher &copy; 2023 | <a target="_blank" href="https://github.com/assafelovic/gpt-researcher">GitHub
Page</a></p>
</footer>

<footer>
<p>GPT Researcher &copy; 2023 | <a target="_blank" href="https://github.com/assafelovic/gpt-researcher">GitHub
Page</a></p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
<script src="/site/scripts.js"></script>
<script>
const btnChoose = document.getElementById('btnChoose');
const btnShowAuto = document.getElementById('btnShowAuto');
const autoAgentDiv = document.getElementById('autoAgentDiv');
const agentChoices = document.getElementsByClassName('agent-choices');

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
<script src="/site/scripts.js"></script>
btnChoose.addEventListener('click', function () {
btnShowAuto.style.display = 'inline-block';
btnChoose.style.display = 'none';
autoAgentDiv.style.display = 'none';
agentChoices[0].style.display = 'flex';
});

btnShowAuto.addEventListener('click', function () {
btnShowAuto.style.display = 'none';
btnChoose.style.display = 'inline-block';
autoAgentDiv.style.display = 'flex';
agentChoices[0].style.display = 'none';
});
</script>
</body>

</html>

0 comments on commit 6c21edb

Please sign in to comment.