Building a 360 Image Viewer Web App with ChatGPT: A Step-by-Step Breakdown
ChatGPT successfully built a 360 image viewer web app using a single HTML file upon receiving a series of detailed prompts from a user. Here’s a step-by-step overview of the prompts and the results:
- Initial prompt: “Create a web app. 1 HTML file. To play 360 image. User can upload their image. And then this app will play or convert the image to a 360-degree video.”
- ChatGPT generated the HTML, CSS, and JavaScript code for the app, using the Pannellum library for 360 image rendering.
- User requested autoplay functionality: “Add autoplay function to automatically rotate the video, add toggle rotation button, add speed control button.”
- ChatGPT added the auto-rotate feature to the app’s code.
Throughout the process, ChatGPT made adjustments to the HTML, CSS, and JavaScript code based on user feedback, resulting in a final web app that allows users to upload an image and view it in a 360-degree format. The app features a modern, colorful UI, a centered upload button, and other functionalities as per the user’s requests. This step-by-step breakdown demonstrates ChatGPT’s ability to understand and execute complex tasks in web development.
WARNING
- This app is intended for educational purposes only. Use it at your own risk!
ChatGPT Prompt
Create a web app. 1 HTML file. To play 360 image. User can upload their image. And then this app will play or convert the image to a 360-degree video
Add autoplay function to automatically rotate the video, add toggle rotation button, add speed control buttonSource Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="360 Image Viewer - AI Tools Arena">
<meta name="description"
content="Explore your 360-degree images with the 360 Image Viewer web app. Upload your image and enjoy an immersive viewing experience, built by AI Tools Arena using ChatGPT.">
<meta name="keywords"
content="360 image viewer, web app, AI Tools Arena, ChatGPT, 360-degree images, image viewer, immersive experience">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
<meta name="author" content="AI Tools Arena">
<title>360 Image Viewer</title>
<script src="https://cdn.pannellum.org/2.5/pannellum.js"></script>
<link rel="stylesheet" href="https://cdn.pannellum.org/2.5/pannellum.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: black;
}
a {
text-decoration: none;
}
img.logo {
max-width: 400px;
margin-bottom: 10px;
}
h1 {
font-size: 2rem;
margin-bottom: 20px;
color: #ffffff;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
}
input[type="file"] {
display: none;
}
label {
display: inline-block;
padding: 12px 24px;
font-weight: 600;
font-size: 1rem;
color: #000000;
background-color: #00f3f5;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
label:hover {
background-color: #3db6a8;
}
.input-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
width: 100%;
max-width: 800px;
margin-bottom: 20px;
}
#viewer {
width: 100%;
max-width: 800px;
height: 500px;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
button {
display: inline-block;
padding: 12px 24px;
font-weight: 600;
font-size: 1rem;
color: #000000;
background-color: #00f3f5;
border-radius: 4px;
margin-top: 18px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #3db6a8;
}
#button-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<a href="https://aitoolsarena.com" target="_blank"><img
src="https://aitoolsarena.com/wp-content/uploads/2023/02/AI-Tools-Arena-600-100.png" alt="AI Tools Arena"
class="logo"></a>
<h1>360 Image Viewer</h1>
<div class="input-container">
<input type="file" id="file-input" accept="image/*">
<label for="file-input">Upload your 360 image</label>
</div>
<div id="viewer"></div>
<div id="button-container">
<button id="toggle-button">Toggle Rotation Direction</button>
<button id="increase-speed">Increase Rotation Speed</button>
<button id="decrease-speed">Decrease Rotation Speed</button>
</div>
<script>
let viewer;
let rotationDirection = -6;
let rotationSpeed = 0.1;
function createViewer(imageDataURL) {
if (viewer) {
viewer.destroy();
}
viewer = pannellum.viewer('viewer', {
type: 'equirectangular',
panorama: imageDataURL,
autoLoad: true,
autoRotate: rotationDirection * rotationSpeed
});
}
function toggleRotationDirection() {
rotationDirection = -rotationDirection;
createViewer(viewer.getConfig().panorama);
}
function increaseRotationSpeed() {
rotationSpeed += 0.1;
createViewer(viewer.getConfig().panorama);
}
function decreaseRotationSpeed() {
rotationSpeed -= 0.1;
if (rotationSpeed < 0.1) {
rotationSpeed = 0.1;
}
createViewer(viewer.getConfig().panorama);
}
document.getElementById('file-input').addEventListener('change', function (event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
createViewer(e.target.result);
};
reader.readAsDataURL(file);
}
});
document.getElementById('toggle-button').addEventListener('click', function () {
toggleRotationDirection();
});
document.getElementById('increase-speed').addEventListener('click', function () {
increaseRotationSpeed();
});
document.getElementById('decrease-speed').addEventListener('click', function () {
decreaseRotationSpeed();
});
</script>
</body>
</html>