Here is a complete code for an Image-to-Text Converter Tool. This tool allows users to upload an image and extract text from it using JavaScript and the [Tesseract.js](https://github.com/naptha/tesseract.js) library, which is a popular open-source OCR (Optical Character Recognition) library.
The tool features:
- Colorful, responsive UI with CSS
- Uploading of image files
- Extracting text from images
- Displaying the extracted text on the screen
### Code
Save this as `index.html` to see it in action.
```html
Image to Text Converter
Image to Text Converter
Extracting text, please wait...
```
### Explanation of the Code
1. **HTML Structure**:
- The main container includes a title, a file input for image selection, a button to trigger the text extraction, and a div to show the extracted text or a loading message.
2. **CSS Styling**:
- The UI has a modern, colorful, and responsive design, using gradients and rounded corners for a polished look.
3. **JavaScript Functionality**:
- The `extractText` function handles the OCR process using Tesseract.js:
- It first checks if a file is uploaded.
- Shows a loading message while processing.
- Calls `Tesseract.recognize` to process the image and extract text.
- Displays the extracted text or an error message.
4. **Responsive Design**:
- Media queries adjust button sizes for smaller screens.
This tool works in any modern browser, and you just need an internet connection to load Tesseract.js. Let me know if you'd like any additional features added!