I have a Python script that contacts the ChatGPT API and I’m using Flask to generate a webpage to write questions to ChatGPT and display the responses. I am using keyframes to animate the response, and am using viewport to better display the content in mobile browsers.
Using viewport means the text better fits the mobile browser but the animated text now gets truncated when it reaches the edge of the screen rather than wrapping; if I scroll across I cannot see any further text even though I know the text is incomplete. The relevant HTML is below.
<!doctype html>
<html>
<head>
<title>ChatGPT project</title>
<style>
body {
display: flex;
justify-content: center;
align-items: left;
height: 100vh;
flex-direction: column;
font-family: Tahoma, sans-serif;
}
.container {
display: flex;
align-items: center;
}
.image {
margin-right: 20px;
}
.output {
border: 0px solid #ddd;
padding: 10px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
animation: answer 4s linear 0s;
}
@keyframes answer {
from {
width: 0%;
}
to {
width: 100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<p> Some blurb here...</p>
<form method="POST">
Your question: <input type="text" size="100px" name="user_input" autocomplete="off">
<input type="submit" value="Ask">
</form>
{% if result %}
<div class="container">
<div class="output">{{ result }}</div>
</div>
{% endif %}
{% if end_result %}
<p>{{ end_result }}</p>
{% endif %}
</body>
</html>
How can I get the animated text to wrap around rather than truncate? And, how can I speed up the animation on the mobile browser? (The speed is good on Chrome on MacOS, but sluggish on Chrome on Android).