More Complex Examples

With Sparkable you are not limited to simple applications, more complicated examples are possible with a little bit or prompt engineering.

Too Impatient? You can find the complete context file and working demo at the bottom of this page.

Demo Application

Let's create an application that can detect possible skin diseases from an image. Sounds complicated, but luckily there is a public API we can use that does the heavy lifting for us.

https://detect-skin-disease.p.rapidapi.com

Our model isn't smart enough yet to fully understand how to use this API in our application...this is where a little bit of prompt magic comes into play.

By providing Sparkable with more detailed directions we can generate much more functional and useful applications. For this we'll need to create a set of instructions in a file that we can then upload to the chat input to create our application.

Context Files

Providing the necessary information to the AI is important and this is why we create context files that help explain what we want.

In our case we need to explain how the API endpoint for this application works by providing instructions in the context file about the endpoint shape, parameters, request, and responses. We'll be using a RTF document to allow different text formats to be parsed by the AI. (but you can also use a TXT or XML file)

API Spec

API Endpoint
- Base URL: https://your-api-endpoint.com
- Endpoint Path: /your-endpoint-path

Request Specifications
- HTTP Method: POST
- Headers:
    - Content-Type: multipart/form-data
    - x-api-host: your-api-host
    - x-api-key: your-api-key

Request Body
- Body Parameters:
    - parameter1: Type - Description
    - parameter2: Type - Description
    

Provide the AI a fully working API example

Example Curl Request

curl --request POST \
  --url https://your-api-endpoint.com/your-endpoint-path \
  --header 'Content-Type: multipart/form-data' \
  --header 'x-api-host: your-api-host' \
  --header 'x-api-key: your-api-key' \
  --form 'parameter1=value1' \
  --form 'parameter2=value2'

And now provide the response format and an example

API Response

Response Format
- Fields:
    - request_id: String - Request ID for problem location.
    - log_id: String - Log ID for problem location.
    - error_code: Integer - Status code.
    - error_code_str: String - Error code string.
    - error_msg: String - Error message.
    - error_detail: Object - Error details.
        - status_code: Integer - Status code.
        - code: String - Precise error code.
        - code_message: String - Information represented by the error code.
        - message: String - Supplementary information for the code message.
    - data: Object - Result data.
        - field1: Type - Description of field1.
        - field2: Type - Description of field2.

Response Example

{
  "request_id": "string",
  "log_id": "string",
  "error_code": 0,
  "error_code_str": "string",
  "error_msg": "string",
  "error_detail": {
    "status_code": 200,
    "code": "string",
    "code_message": "string",
    "message": "string"
  },
  "data": {
    "field1": "value1",
    "field2": "value2"
  }
}

Finally we'll provide a few additional notes about the image formatting we'll be providing

Any additional notes

- Ensure that the image format is either JPG or PNG.
- The image size should not exceed 20 MB.
- The image resolution should be less than 1280x1280px.

Upload and Create Your App

We're now ready to upload our context file to Sparkable and ask it to create the application. Let's use the following prompt to create our application.

Create a skin disease analyzer, use a dark theme, the image should have a preview, add some charts ams a cool visualization of the results

Example Code

Here is the full text and a working demo of this example.

• Full Example Context File

• View the working application on Sparkable