<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fabric</title>
<link rel="stylesheet" href="static/stylesheet/bootstrap.min.css" />
<link rel="stylesheet" href="static/stylesheet/style.css" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">
<img
src="static/images/fabric-logo-gif.gif"
alt="Fabric Logo"
height="40"
/>
</a>
<button id="configButton" class="btn btn-outline-success my-2 my-sm-0">
Config
</button>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarCollap se"
aria-controls="navbarCollapse"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<button
id="updatePatternsButton"
class="btn btn-outline-success my-2 my-sm-0"
>
Update Patterns
</button>
<button id="createPattern" class="btn btn-outline-success my-2 my-sm-0">
Create Pattern
</button>
<button
id="fineTuningButton"
class="btn btn-outline-success my-2 my-sm-0"
>
Fine Tuning
</button>
<div class="collapse navbar-collapse" id="navbarCollapse"></div>
<div class="m1-auto">
<a class="navbar-brand" id="themeChanger" href="#">Dark</a>
</div>
</nav>
<main>
<div class="container" id="my-form">
<div class="selector-container">
<select class="form-control" id="patternSelector"></select>
<select class="form-control" id="modelSelector"></select>
</div>
<textarea
rows="5"
class="form-control"
id="userInput"
placeholder="start typing or drag a file (.txt, .svg, .pdf and .doc are currently supported)"
></textarea>
<button class="btn btn-primary" id="submit">Submit</button>
</div>
<div id="patternCreator" class="container hidden">
<input
type="text"
id="patternName"
placeholder="Enter Pattern Name"
class="form-control"
/>
<textarea
rows="5"
class="form-control"
id="patternBody"
placeholder="Create your pattern"
></textarea>
<button class="btn btn-primary" id="submitPattern">Submit</button>
<div id="patternCreatedMessage" class="hidden">
Pattern created successfully!
</div>
</div>
<div id="configSection" class="container hidden">
<input
type="text"
id="apiKeyInput"
placeholder="Enter OpenAI API Key"
class="form-control"
/>
<input
type="text"
id="claudeApiKeyInput"
placeholder="Enter Claude API Key"
class="form-control"
/>
<button id="saveApiKey" class="btn btn-primary">Save API Key</button>
</div>
<div id="fineTuningSection" class="container hidden">
<div>
<label for="temperatureSlider">Temperature:</label>
<input
type="range"
id="temperatureSlider"
min="0"
max="2"
step="0.1"
value="0"
/>
<span id="temperatureValue">0</span>
</div>
<div>
<label for="topPSlider">Top_p:</label>
<input
type="range"
id="topPSlider"
min="0"
max="2"
step="0.1"
value="1"
/>
<span id="topPValue">1</span>
</div>
<div>
<label for="frequencyPenaltySlider">Frequency Penalty:</label>
<input
type="range"
id="frequencyPenaltySlider"
min="0"
max="2"
step="0.1"
value="0.1"
/>
<span id="frequencyPenaltyValue">0.1</span>
</div>
<div>
<label for="presencePenaltySlider">Presence Penalty:</label>
<input
type="range"
id="presencePenaltySlider"
min="0"
max="2"
step="0.1"
value="0.1"
/>
<span id="presencePenaltyValue">0.1</span>
</div>
</div>
<div class="container hidden" id="responseContainer"></div>
</main>
<script src="static/js/jquery-3.0.0.slim.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/index.js"></script>
</body>
</html>