-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
126 lines (120 loc) · 6.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>twainsformation</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="container">
<div class="row align-items-center">
<div class="col">
<h1>twainsformation</h1>
</div>
<div class="col-auto">
<button class="btn btn-primary" id="api-key-btn">API Key</button>
</div>
</div>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#" id="style-changer-tab">Style Changer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="book-writer-tab">Book Writer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="book-condenser-tab">Book Condenser</a>
</li>
</ul>
<div id="style-changer">
<form id="style-changer-form" method="post" enctype="multipart/form-data">
<input type="hidden" name="form_id" value="style-changer-form">
<div>
<span class="inputLabel">File: </span><input type="file" id="fileUpload" name="fileUpload"
accept=".txt">
<div class="error" id="fileError"></div>
</div>
<div>
<span class="inputLabel">Title: </span><input type="text" id="title" name="title"
placeholder="The Grapes of Wrath">
<div class="error" id="titleError"></div>
</div>
<div>
<span class="inputLabel">Author: </span><input type="text" id="author" name="author"
placeholder="John Steinbeck">
<div class="error" id="authorError"></div>
</div>
<div>
<span class="inputLabel">Prompt: </span><input type="text" id="prompt" name="prompt"
placeholder="Can you rewrite this in the style of Mark Twain?">
<div class="error" id="promptError"></div>
</div>
<div>
<span class="inputLabel">ChatGPT Model: </span><select id="chatgptModel" name="chatgptModel">
<option value="gpt-4o-mini">gpt-4o-mini</option>
<!-- <option value="gpt-4">gpt-4</option> -->
</select>
</div>
<div>
<button type="submit" class="submit-button">Submit</button>
</div>
</form>
<!-- Add the loading bar container -->
<div class="mt-3 loading-bar-container" id="style-changer-loading-bar-container">
<div class="loading-bar" id="style-changer-loading-bar"></div>
<div class="loading-percent" id="style-changer-loading-percent">0%</div>
</div>
</div>
<div id="book-writer">
<form id="book-writer-form">
<span class="inputLabel">Prompt Type: </span><select id="book-writer-prompt-type" name="book-writer-prompt-type">
<option value="Outline">Outline</option>
<option value="Summary">Summary</option>
</select>
<br />
<span class="inputLabel">Title: </span><input type="text" id="book-writer-title"
name="book-writer-title" placeholder="Whispers of the Midnight Forest">
<div id="book-writer-outline-tab">
<div class="error" id="book-writer-title-Error"></div>
<div id="inputContainer"></div>
<!-- Dynamic input fields will be added here -->
<button type="button" class="other-button" id="addInputBtn">Add Input</button>
</div>
<div id="book-writer-summary-tab">
<div class="form-group">
<label for="summaryTextarea">Summary:</label>
<textarea class="form-control" id="summaryTextarea" name="summaryTextarea" rows="5" placeholder="Enter your summary here..."></textarea>
</div>
</div>
<button type="submit" class="submit-button">Submit</button>
</form>
<!-- Add the loading bar container -->
<div class="mt-3 loading-bar-container" id="book-writer-loading-bar-container">
<div class="loading-bar" id="book-writer-loading-bar"></div>
<div class="loading-percent" id="book-writer-loading-percent">0%</div>
</div>
</div>
<div id="book-condenser">
</div>
<div id="api-key">
<span class="inputLabel">API Key: </span><input type="password" id="api-key-input" name="api-key-input">
<div class="error" id="book-writer-title-Error"></div>
<button type="button" class="other-button" id="save-api-key-btn">Save to Local Storage</button>
<div id="api-key-note"><b>Note:</b> This feature is optional and will use your browsers data storage system
to remember your API Key. Saving to local storage will allow you to not need to input your API key every
time, but is not required. We <b>DO NOT</b> store or save your key anywhere besides your own browser.
</div>
</div>
</div>
<script>
</script>
</body>
</html>