Are there any AI enthusiasts?

Frappe Builder
1

I am creating a prompt to convert any given web page (via URL) to a Frappe Builder page.

My expectation is getting a JSON file which I can directly paste into ERPNext. These are the prompts I’ve tried and failed. Do you have any idea?

## Objective
Convert raw HTML source code into a structured JSON file that can be directly imported into Frappe Builder for web page creation.

## Conversion Rules and Guidelines

### 1. Structure Mapping
- Map HTML elements to Frappe Builder's component structure
- Preserve hierarchy and nesting of elements
- Convert CSS classes and inline styles to Frappe Builder's styling system

### 2. Component Identification
- Identify distinct sections of the webpage
- Convert major HTML elements to appropriate Frappe Builder components:
  * `<div>` → Section or Container
  * `<header>` → Header Section
  * `<nav>` → Navigation Section
  * `<main>` → Main Content Section
  * `<footer>` → Footer Section
  * `<img>` → Image Component
  * `<h1>`, `<h2>`, etc. → Heading Component
  * `<p>` → Text Component
  * `<a>` → Link Component
  * `<button>` → Button Component
  * `<form>` → Form Section
  * `<input>` → Form Input Component

### 3. Attribute and Style Conversion
- Convert HTML attributes to Frappe Builder properties
  * `class` → Map to Frappe Builder's styling system
  * `id` → Used as unique identifier
  * `style` → Convert inline styles to component-specific styling
  * `href` → Link destinations
  * `src` → Image sources

### 4. Content Extraction
- Extract and preserve all text content
- Maintain original formatting and structure
- Handle nested elements and their content hierarchically

### 5. Semantic Understanding
- Analyze the overall purpose and layout of the webpage
- Suggest appropriate Frappe Builder page template
- Identify potential dynamic or interactive elements

## Conversion Process

1. Analyze Input HTML
   - Parse the entire HTML document
   - Break down into structural components
   - Identify nested elements and their relationships

2. Component Mapping
   - Match HTML elements to closest Frappe Builder components
   - Create a hierarchical JSON representation
   - Preserve original styling and attributes as closely as possible

3. JSON Structure Generation
   - Create a JSON that follows Frappe Builder's schema
   - Include all necessary metadata and component definitions
   - Ensure the JSON is ready for direct import

## Example Conversion Template

```json
{
  "page_name": "Generated Page",
  "sections": [
    {
      "type": "section",
      "components": [
        {
          "type": "heading",
          "content": "Original H1 Text",
          "properties": {
            "style": {},
            "classes": []
          }
        },
        {
          "type": "text",
          "content": "Paragraph content",
          "properties": {
            "style": {},
            "classes": []
          }
        }
      ]
    }
  ]
}```
Special Handling Instructions

Preserve responsive design considerations
Handle media queries and responsive classes
Convert Bootstrap/Tailwind classes to equivalent Frappe Builder styles
Manage complex nested structures carefully ```
1 Like
2

Another failed attempt:

You are the Tech Advisor of the Logedo.com which provides Frappe Framework and ERPNext based business apps for the factories. Your only job is to analyze the given problem deeply, utilize the ready made solutions, features, functions in ERPNext and Frappe and advice to most efficient (ie requires least development time) ways to solve given problems.

Now take a deep breath, analyze Frappe Framework and ERPNext features, services analyze its core features reply with "I am ready" when you are ready.

-I am ready.

I can create websites with Frappe Builder. Nearly everything in Frappe is a json object so websites which created with Frappe Builder also in fact copy-pasted by json. I will give a website url (which is build with webflow) and we need to recreate it using Frappe Builder. Can you create a json file which can be directly pasted in ERPNext by analyzing the given URL, it's structure and content?

Our ultimate purpose is duplicating websites within the Frappe Builder easily as possible.

URL: https://www.benvansprundel.com/
3

I am getting somewhere :slight_smile:

image
image2880×1627 88.5 KB

4

What do you mean by failed?

What does attached images shows?

Hanged AI?

5

I need an easy way to convert any given web page to Frappe Builder Page.

I assume that I can do that with a prompt. That page is just shows one of the failed attempt.

Edit: I want to reproduce this page in Frappe Builder: Free SEO 2.0 crash course: Turbocharge your organic traffic using AI-powered SEO

6

As frappe builder is not quite old so AI tools might not have sufficient knowledge about it.

You might trying training AI tools by feeding example and / or official documentation / code.

But in the current state-of-the-art I am not very hopeful for the great success.

From the interaction in this thread, even it looks that there is no sufficient interest in this topic.

1 Like