DayFR Euro

how to create an application from an image without knowing how to code?

THE IAIA Generative tools such as ChatGPT are able to code simple programs efficiently. And to guide you in putting them into service.

Professional programmers can rest assured: large-scale programs, for example, managing a company’s accounting or payroll, require advanced expertise and cannot be entrusted to generative AI. On the other hand, if there is an area where ChatGPTChatGPTClaude and others are called to create a revolution, it is in the practice of “low code” and “no code”, these interfaces for creatingapplicationsapplications dedicated to non-programmers. Generative AI is able to generate simple programs that an employee might need in the course of their daily activity.

Start from an image

One of the advantages of generative AI comes from the fact that it is possible to transmit to ChatGPT, Gemini or Claude an image describing the interface that we wish to obtain, and from this visual, to specify the desired interactions.

In the application presented here, we used maps of available on the D-Maps website which offers freely downloadable maps. And in case you would like to reproduce this example step by step, the maps we used are as follows: Map of France without department names, Map of France with department names

The France map application

The application that we had created by ChatGPT can be tested at this address. It reveals an empty map of France. When you click on a department, the map is redisplayed with the corresponding names.

If we click again, the empty card reappears.

The prompt to create the application

To create this application, we uploaded the two cards to ChatGPT then we gave it the following instruction:

“I will provide you with two images.

The first is a map of France with the departments, but without the names.

The second is a map of France with department names.

I would like you to create a web application that displays the 1st card. When the user clicks on a department, the corresponding name appears.

Create an application that I can easily run from a website. »

ChatGPT then produced the corresponding code. And he also gave us the instructions to follow to put this code online. It was necessary to have some dialogue with him in order to adjust certain aspects. Note also that it was necessary to rename the maps of France so that they had the same name as in the code he provided. For the most part, however, we got a working application without having to code it. You can try it with the example provided here.

Note that it is possible to do the same from Claude, Gemini or other. What’s more, if you know how to write long, very detailed prompts, you can then create relatively sophisticated applications, starting from visuals such as a simple screenshot or models such that you can find it on the Notion website.

-

Related News :