Use of Input Files
You can use input files for pretty much anything. Below are some examples of what you can do.
Input files can be code, image, Word or PDF documents.
To Copy the Code
It is possible to submit code files that Priset should examine and take action upon. For example, the following prompt is asking Priset to look into the existing CSS file and apply the same styles to the target screen:
In the change subscription plan dialog I want plans to match the pricing plan cards
I have on the corporate site. The corporate site css is stored in this file:
"D:\repos\CorporateSite\client\src\components\Pricing.css"
To give another example, the following prompt will copy the files from an external application and incorporate them into the existing solution:
Import the Contact form and its CSS file from another application. It's stored in the following files
"D:\repos\CorporateSite\client\src\components\ContactModal.tsx" ,
"D:\repos\CorporateSite\client\src\components\ContactModal.css"
This form is connecting to 2 existing endpoints on the server, but adjust the endpoint URLs as follows:
1) SOURCE-URL needs to become TARGET-URL and
2) SOURCE-URL-2 needs to become TARGET-URL-2
Add Google ReCAPTCHA v3 to the client site but only use it for this contact form.
The reCAPTCHA site key is KEY-VALUE
Pass on the appropriate "Captcha Token" to both of the endpoints.
The other parameters and handling of the endpoints is already correct and doesn't need adjustment.
Simply provide the full path(s) to the file(s) stored on your computer. Priset will use it / them to accomplish the task it was asked to do.
To Copy the Style
It is also possible to provide the URL of a site and ask Priset to copy the styles from that specific site and apply them to your solution.
This will not work if the target site blocks or does not allow crawlers.
To Implement the Given Design
It is also possible to point to an image saved on your computer and instruct Priset to create a screen that matches the given design shown in the image. For example, the following prompt creates the screen on the client side plus the server endpoints that screen would use:
Create the Admin Dashboard as per the design in the "C:\temp\dashboard.png" file.
Create the client and server functionality and provide dummy data.
To Create Documentation
You can use screenshots or other documents to create documentation. For example:
Append to the bottom of the getting-started.md page the description of the login process
that is using the login sreen with the screenshot saved in the "C:\temp\Website-login-screen.png"
If the user is signing up they will use the signup screen.
That screen's screenshot is given in the "C:\temp\Website-signup-screen.png" file.
Describe the login and signup process
To Make Changes
In this video, we demonstrate how Priset's multimodal capabilities can interpret images to make precise code changes in a live React application.
In the first part of the video the developer is attaching a screenshot of the UI elements (i.e. two buttons) they want to remove. The prompt used is:
Remove the buttons shown in the picture
In the second part of the video the developer screenshots the area of the screen showing the QR code element and then draws the red box around it in order to highlight the specific part that they want Priset to focus on. In other words, you can add markups and notes to your screenshots. The image is then attached to the chat and Priset is instructed to change the background color for the highlighted area. The prompt used is:
Change the backgroung colur of the highlighted area.
The colour should match with the theme of the website.
The text within should be visible properly with the new colour.
Notice how Priset correctly understands which element should be changed. The developer is not happy with the color and issues the following prompt:
But the colour did not match with the website theme. Fix it.
Also make sure that text within will match.
In the next iteration, Priset applied the proper color and the text is visible, but the developer wants all text to be white and issues the following prompt:
Can you make the text white.
Notice that the developer didn't need to specify which text to change as the current session provides all the context.
To Do ...
Please email us with us your thoughts and examples of how you used this feature and we may include them on this page.