Image to Prompt Converter code in html css and java

Get Your Html Code

<!DOCTYPE html>
<html>
<head>
  <title>Image to Prompt Converter</title>
  <style>
  body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

h1 {
  text-align: center;
}

input[type="file"] {
  display: block;
  margin: 10px auto;
}

button {
  display: block;
  margin: 10px auto;
}

#output {
  margin-top: 20px;
  text-align: center;
}</style>
</head>
<body>
  <h1>Image to Prompt Converter</h1>
  <input type="file" id="imageUpload" accept="image/*">
  <button onclick="convertImage()">Convert</button>
  <div id="output"></div>

  <script src="script.js"></script>
</body>
</html>

Java Code

 

// Function to convert image to prompt
function convertImage() {
  const imageUpload = document.getElementById('imageUpload'); // Get the file input element
  const output = document.getElementById('output'); // Get the output div

  if (imageUpload.files && imageUpload.files[0]) { // Check if a file is selected
    const reader = new FileReader(); // Create a new FileReader object

    reader.onload = function(e) {
      const img = new Image(); // Create a new Image object
      img.src = e.target.result; // Set the source of the image to the file content

      img.onload = function() {
        // Placeholder: Add your image processing logic here
        output.innerHTML = 'Image converted to prompt successfully!'; // Display success message
      };
    };

    reader.readAsDataURL(imageUpload.files[0]); // Read the file as a data URL
  } else {
    output.innerHTML = 'No image selected.'; // Display error message if no file is selected
  }
}