-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
169 lines (162 loc) · 5.63 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
<head>
<!-- META DATA -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- IMPORT CSS FILES -->
<link href="/files/css/style.css" rel="stylesheet" type="text/css" />
<link href="/files/css/structure.css" rel="stylesheet" type="text/css" />
<link
href="/files/css/media_queries.css"
rel="stylesheet"
type="text/css"
/>
<!-- TITLE AND ICON -->
<title>AI Poem Generator</title>
<link
rel="icon"
type="image/x-icon"
href="https://i.ibb.co/Ln8L1FC/H-removebg-preview-1.png"
/>
<!-- LOAD GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Alkatra:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<!-- SCRIPTS -->
<script src="/files/js/tts.js" defer></script>
<script>
function submit() {
var strophes = "2";
var verses = "4";
var theme = document.getElementById("theme").value;
var keywords = document.getElementById("keywords").value;
document.getElementById("output_container").style.display = "block";
const options = {
method: "POST",
headers: {
accept: "application/json",
"content-type": "application/json",
},
body: JSON.stringify({
strophes: strophes,
verses: verses,
theme: theme,
keywords: keywords,
}),
};
var poem = "API Error";
var link = "https://www.freeiconspng.com/uploads/error-icon-7.png";
console.log("1");
fetch("/poem", options)
.then(async (response) => {
poem_obj = await response.json();
poem = poem_obj.poem;
console.log(poem);
poem = poem.replace(/(?:\r\n|\r|\n)/g, "<br>");
link = poem_obj.link;
document.getElementById("text").innerHTML = poem;
document.getElementById("image").src = link;
})
.catch((err) => {
poem =
"Sorry, we could not generate a poem for you at this time, please try again later";
link = "https://www.freeiconspng.com/uploads/error-icon-7.png";
console.error(err);
});
}
</script>
</head>
<body>
<!------Navbar-------------->
<div class="navbar only_pc">
<a href="/" class="nav but1 selected1">HOME</a>
<img src="https://i.ibb.co/PWVQqRZ/logo.png" class="poza" />
<a href="/presentation" class="nav but2">ABOUT US</a>
</div>
<div class="navbar only_m navbar_m">
<img src="https://i.ibb.co/PWVQqRZ/logo.png" class="poza" />
<div>
<a href="/" class="nav but1 selected1">HOME</a>
<a href="/presentation" class="nav but2">ABOUT US</a>
</div>
</div>
<!---------Header---------->
<div class="header">
<div class="back">
<h1 class="titlu only_pc">WELCOME TO ASTROPOET AI</h1>
<h1 class="titlu only_m">WELCOME TO<br />ASTROPOET AI</h1>
</div>
<a href="#formular" class="arrow"></a>
</div>
<!--------Formular--------->
<div id="formular" class="main centered font_m1">
<div class="round padding centered column">
<p style="font-weight: 500; margin-bottom: 1vw">
Try our poem generator and get a bonus image!
</p>
<label for="theme">Theme</label>
<input id="theme" name="theme" type="text" />
<label for="keywords">Keywords</label>
<input id="keywords" name="keywords" type="text" />
<a href="#output_container">
<button id="submit" onclick="submit()">Submit</button>
</a>
</div>
</div>
<div
id="output_container"
class="container_output font_m2"
style="display: none"
>
<div>
<div id="text" class="font_m2">
<br /><br /><br />
Generating poem...<br />
<br /><br /><br />
</div>
<div>
<img id="image" src="" alt="" />
</div>
</div>
<div>
<button id="play" class="butonc1">Play🔊</button>
<button id="stop" class="butonc2">Stop🔇</button>
</div>
</div>
<!----------Main----------->
<div class="about_our_ai">
<h1>ABOUT OUR AI</h1>
<p>
Our AI Poem Generator can create poetry in a variety of forms, including
sonnets, haikus, and free verse, and can incorporate a range of themes
and topics. Whether you're looking for love poetry, nature poetry, or
anything in between, our AI Poem Generator can provide a customized
experience that meets your specific needs and preferences. <br /><br />
<i
>"Artificial intelligence is the future, not just for computing, but
for mankind."</i
>
- Tim Cook
</p>
</div>
<!---------Footer---------->
<div class="footer font_m1">
<div>
<p class="pf">
© 2023 <a href="#" class="copyright">HARIBO TEAM</a> - ALL RIGHTS
RESERVED
</p>
</div>
</div>
<!------------------------->
</body>
</html>