AI_Assistant/popup.html

76 lines
3.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>My Chrome Extension</title>
<!-- Add the FontAwesome and Bootstrap links -->
<link rel="stylesheet" href="./includes/all.min.css">
<link rel="stylesheet" href="./includes/bootstrap.min.css">
</head>
<body style="width: 500px;">
<!-- Create the tabbed interface -->
<div class="tabs nav nav-tabs" role="tablist">
<a class="nav-item nav-link active" id="tab1" data-toggle="tab" href="#tab1-content" role="tab">
<i class="fas fa-search"></i>
</a>
<a class="nav-item nav-link" id="tab2" data-toggle="tab" href="#tab2-content" role="tab">
<i class="fas fa-cog"></i>
</a>
</div>
<!-- Add the tab content -->
<div class="tab-content">
<div class="tab-pane active" id="tab1-content" role="tabpanel">
<!-- Add a text area and a submit button -->
<textarea id="text-area" readonly class="form-control"
style="max-height: 500px; height: 200px; white-space: pre-wrap;"></textarea>
<input type="text" id="text-input" class="form-control" placeholder="Start chatting here">
</div>
<div class="tab-pane" id="tab2-content" role="tabpanel">
<!-- Settings -->
<button id="reset" class="btn btn-secondary" style="float: right">Reset</button>
<form id="settings-form" class="form-group"
style="padding: 22px; width: 400px; margin-left: auto; margin-right: auto;">
<label for="api_key" class="control-label">API KEY:</label>
<input type="password" id="api_key" name="api_key" class="form-control">
<br>
<label for="model" class="control-label">Model:</label>
<select id="model" name="model" class="form-control">
<option value="text-davinci-002">text-davinci-002</option>
<option value="text-davinci-003" selected>text-davinci-003</option>
<option value="text-curie-001">text-curie-001</option>
<option value="text-babbage-001">text-babbage-001</option>
<option value="text-ada-001">text-ada-001</option>
</select>
<br>
<label for="temperature" class="control-label">Temperature:</label>
<input type="number" id="temperature" name="temperature" min="0" max="1" step="0.1" value="0.7"
class="form-control">
<br>
<label for="max_tokens" class="control-label">Max Tokens:</label>
<input type="number" id="max_tokens" name="max_tokens" min="1" max="2048" value="256" class="form-control">
<br>
<label for="top_p" class="control-label">Top P:</label>
<input type="number" id="top_p" name="top_p" min="0" max="1" step="0.1" value="1" class="form-control">
<br>
<label for="frequency_penalty" class="control-label">Frequency Penalty:</label>
<input type="number" id="frequency_penalty" name="frequency_penalty" min="0" max="1" step="0.1" value="0"
class="form-control">
<br>
<label for="presence_penalty" class="control-label">Presence Penalty:</label>
<input type="number" id="presence_penalty" name="presence_penalty" min="0" max="1" step="0.1" value="0"
class="form-control">
<br>
<button type="submit" class="btn btn-primary">Update Settings</button>
</form>
</div>
</div>
<!-- Add the Bootstrap and FontAwesome scripts -->
<script src="./includes/jquery.slim.min.js"></script>
<script src="./includes/bootstrap.bundle.min.js"></script>
<script src="./includes/all.min.js"></script>
<!-- Add the custom script file -->
<script src="popup.js"></script>
</body>
</html>