Inspiration
The inspiration came from the challenge of converting unstructured data into a functional digital interface. I wanted to demonstrate how PaddleOCR-VL and ERNIE 4.5 can work together to turn a static PDF into a professional, live web page.
What it does
This project takes content extracted from a document and transforms it into a clean, modern, and responsive HTML/CSS webpage. It organizes information about AI capabilities into an easy-to-read, card-based layout that is accessible on any device.
How we built it
Extraction: Used PaddleOCR-VL to accurately capture text and layout from the source document.
Formatting: Organized the raw text into a structured Markdown format.
Generation: Leveraged the ERNIE 4.5 model to generate the final HTML code with custom CSS for a professional look.
Deployment: Hosted the final index.html file on GitHub Pages for public viewing.
Challenges we ran into
The main challenge was ensuring the generated CSS was perfectly responsive and that the ERNIE model correctly interpreted the technical hierarchy of the multimodal AI features.
Accomplishments that we're proud of
I am proud of successfully creating a fully functional web page that not only looks professional but also accurately represents the advanced multimodal capabilities of the ERNIE model.
What we learned
I learned how to integrate multiple AI tools into a single workflow, specifically how to use OCR for data entry and LLMs for creative web development and design.
What's next for ERNIE Web Builder: AI-Powered HTML Generator
The journey doesn't end here. For the future of this project, I plan to:
Enhanced Multimodal Integration: Implement more complex layouts that can handle multiple images and charts directly from the ERNIE model's output.
Dynamic Styling Options: Add a feature where users can choose different design themes (e.g., Minimalist, Corporate, Dark Mode) before the HTML is generated.
Real-time Preview: Build a simple interface where users can see the web page update in real-time as the ERNIE model processes the Markdown content.
SEO Optimization: Train the workflow to automatically generate meta tags and SEO-friendly structures to make the generated pages rank better on search engines.
Direct GitHub API Integration: Automate the deployment process so that the generated index.html is automatically pushed to a GitHub repository without manual uploading.
Log in or sign up for Devpost to join the conversation.