UI/UX Genius Widget API

The UI/UX Genius Widget is an intelligent widget designed to empower designers by automating the ideation and planning stages of user experience and interface

Input

Send these Fields as input. A Field not listed here is refused.

TITLE

Title of the feature

  • Type: string
  • Required: yes
  • Length in characters: 1 to 100

PROJECT_NAME

Name of the project the feature is for

  • Type: string
  • Required: yes
  • Length in characters: 1 to 100

FEATURE_DESCRIPTION

Description of the feature

  • Type: string
  • Required: yes
  • Length in characters: 50 to 30000

IMAGINED_USER_STORY

Imagined user story

  • Type: string
  • Required: yes
  • Length in characters: 50 to 30000

FUNCTIONAL_REQUIREMENTS

Functional requirements of the feature

  • Type: string
  • Required: yes
  • Length in characters: 50 to 30000

TECHNICAL_CONSTRAINTS

Technical constraints of the feature

  • Type: string
  • Required: yes
  • Length in characters: 1 to 30000

PROCESS_STEP

How many steps is in the process

  • Type: string
  • Required: yes
  • Allowed values: Single, Multi

DEVICE_TYPE

Main device type for feature UX

  • Type: string
  • Required: yes
  • Allowed values: Web, Mobile, Desktop

PRIMARY_USER_TYPE

Primary user type

  • Type: string
  • Required: yes
  • Allowed values: Registered User, Guest User, Admin

FEATURE_TYPE

Feature type

  • Type: string
  • Required: yes
  • Allowed values: Graphical User Interface (GUI), Voice User Interface (VUI), Touch User Interface (TUI), Command Line Interface (CLI), Natural Language Interface (NLI), Augmented Reality (AR) Interface, Virtual Reality (VR) Interface, Adaptive UI, Responsive UI, Motion UI, Dashboard UI, Form-Based UI, Menu-Based UI, Card-Based UI

Run it

One call presses the Widget and answers the run once its status is succeeded or failed, however long it takes. The key is read from ABYSS_API_KEY. Install the library with npm install abysshub or pip install abysshub; cURL sends the Fields as a form.

JavaScript

// index.mjs
import Abyss from "abysshub";

const abyss = new Abyss();

const run = await abyss.run("widget_84", {
  TITLE: "Widget creation process",
  PROJECT_NAME: "Abyss (marketplace for AI Widgets)",
  FEATURE_DESCRIPTION: "The first step of the process consists of uploading the python project. To facilitate this there is a dropdown area to drag and drop the project, alternatively the user can paste a github repo link. Once the project is there and it passes basic validation of having a main.py in the root folder as well as requirements.txt, the user can proceed to second step. The second step allows user to create input fields for the widget. These can include any of the following input types: Text field, text area, Number field, Radio group, Checkboxes, Select, Date and file input (for uploading any files as inputs). These will be passed to the widget as env variables when the widget is run. After the interface is created, the third step is filling in the inputs for a test run and test running the widget. The widget is supposed to produce outputs as one or multiple files (these will be presented with the file preview functionality) if successful the widget can be created by filling in remaining fields such as title, tags, etc.",
  IMAGINED_USER_STORY: "User presses create widget and the process begins, the whole viewport is used for this process focusing only on it for comfort. There is a progress bar with steps on the left to track and navigate steps. There is a button to go to next step at the bottom right. 1 project upload, 2 create input fields, 3 enter data into the fields and run widget, 4 review outputs, 5 complete widget creation (fill in widget title, description, tags, thumbnail, price, visibility (public/private), finalize and create. Now the widget page is created and the process completes.",
  FUNCTIONAL_REQUIREMENTS: "Upload project, drag and drop. Input field for github repo as alternative for project upload. Step 2 has a button to create input fields, it opens a popup with choices, and a popup for each of the options contains necessary fields such as label, env variable input field, and some validation options. Cool loader for test running widget. Error handling throughout and if widget test run was unsuccessful. File in browser viewer to present output files. And a bunch of input fields to finalize widget creation process.",
  TECHNICAL_CONSTRAINTS: "For python project drag and drop, user can select a folder (there is also a button to just add files, but this doesn't support folders, which is uncomfortable, so need good UX). Some file extensions can't be rendered in browser, so those need to display that they cannot be presented with an option to download.",
  PROCESS_STEP: "Multi",
  DEVICE_TYPE: "Web",
  PRIMARY_USER_TYPE: "Registered User",
  FEATURE_TYPE: "Graphical User Interface (GUI)",
});

for (const path of await run.save("output")) {
  console.log(path);
}

Python

from abysshub import Abyss

abyss = Abyss()

run = abyss.run("widget_84", {
    "TITLE": "Widget creation process",
    "PROJECT_NAME": "Abyss (marketplace for AI Widgets)",
    "FEATURE_DESCRIPTION": "The first step of the process consists of uploading the python project. To facilitate this there is a dropdown area to drag and drop the project, alternatively the user can paste a github repo link. Once the project is there and it passes basic validation of having a main.py in the root folder as well as requirements.txt, the user can proceed to second step. The second step allows user to create input fields for the widget. These can include any of the following input types: Text field, text area, Number field, Radio group, Checkboxes, Select, Date and file input (for uploading any files as inputs). These will be passed to the widget as env variables when the widget is run. After the interface is created, the third step is filling in the inputs for a test run and test running the widget. The widget is supposed to produce outputs as one or multiple files (these will be presented with the file preview functionality) if successful the widget can be created by filling in remaining fields such as title, tags, etc.",
    "IMAGINED_USER_STORY": "User presses create widget and the process begins, the whole viewport is used for this process focusing only on it for comfort. There is a progress bar with steps on the left to track and navigate steps. There is a button to go to next step at the bottom right. 1 project upload, 2 create input fields, 3 enter data into the fields and run widget, 4 review outputs, 5 complete widget creation (fill in widget title, description, tags, thumbnail, price, visibility (public/private), finalize and create. Now the widget page is created and the process completes.",
    "FUNCTIONAL_REQUIREMENTS": "Upload project, drag and drop. Input field for github repo as alternative for project upload. Step 2 has a button to create input fields, it opens a popup with choices, and a popup for each of the options contains necessary fields such as label, env variable input field, and some validation options. Cool loader for test running widget. Error handling throughout and if widget test run was unsuccessful. File in browser viewer to present output files. And a bunch of input fields to finalize widget creation process.",
    "TECHNICAL_CONSTRAINTS": "For python project drag and drop, user can select a folder (there is also a button to just add files, but this doesn't support folders, which is uncomfortable, so need good UX). Some file extensions can't be rendered in browser, so those need to display that they cannot be presented with an option to download.",
    "PROCESS_STEP": "Multi",
    "DEVICE_TYPE": "Web",
    "PRIMARY_USER_TYPE": "Registered User",
    "FEATURE_TYPE": "Graphical User Interface (GUI)",
})

for path in run.save("output"):
    print(path)

cURL

curl https://api.abysshub.com/v1/widgets/widget_84/runs \
  -H "Authorization: Bearer $ABYSS_API_KEY" \
  -F 'TITLE=Widget creation process' \
  -F 'PROJECT_NAME=Abyss (marketplace for AI Widgets)' \
  -F 'FEATURE_DESCRIPTION=The first step of the process consists of uploading the python project. To facilitate this there is a dropdown area to drag and drop the project, alternatively the user can paste a github repo link. Once the project is there and it passes basic validation of having a main.py in the root folder as well as requirements.txt, the user can proceed to second step. The second step allows user to create input fields for the widget. These can include any of the following input types: Text field, text area, Number field, Radio group, Checkboxes, Select, Date and file input (for uploading any files as inputs). These will be passed to the widget as env variables when the widget is run. After the interface is created, the third step is filling in the inputs for a test run and test running the widget. The widget is supposed to produce outputs as one or multiple files (these will be presented with the file preview functionality) if successful the widget can be created by filling in remaining fields such as title, tags, etc.' \
  -F 'IMAGINED_USER_STORY=User presses create widget and the process begins, the whole viewport is used for this process focusing only on it for comfort. There is a progress bar with steps on the left to track and navigate steps. There is a button to go to next step at the bottom right. 1 project upload, 2 create input fields, 3 enter data into the fields and run widget, 4 review outputs, 5 complete widget creation (fill in widget title, description, tags, thumbnail, price, visibility (public/private), finalize and create. Now the widget page is created and the process completes.' \
  -F 'FUNCTIONAL_REQUIREMENTS=Upload project, drag and drop. Input field for github repo as alternative for project upload. Step 2 has a button to create input fields, it opens a popup with choices, and a popup for each of the options contains necessary fields such as label, env variable input field, and some validation options. Cool loader for test running widget. Error handling throughout and if widget test run was unsuccessful. File in browser viewer to present output files. And a bunch of input fields to finalize widget creation process.' \
  -F 'TECHNICAL_CONSTRAINTS=For python project drag and drop, user can select a folder (there is also a button to just add files, but this doesn'\''t support folders, which is uncomfortable, so need good UX). Some file extensions can'\''t be rendered in browser, so those need to display that they cannot be presented with an option to download.' \
  -F PROCESS_STEP=Multi \
  -F DEVICE_TYPE=Web \
  -F 'PRIMARY_USER_TYPE=Registered User' \
  -F 'FEATURE_TYPE=Graphical User Interface (GUI)'

A succeeded run carries its result and its output_files. Their URLs are signed for each read: re-read the run, never store a URL. A run still queued or running in the answer (after an hour, or when the API is busy) is read again at its Location with ?wait=true.

More

Keys, files, errors and limits: API access.