Skip to content

Quick prototyping tool to create AI workflows one level or two above prompt engineering

License

Notifications You must be signed in to change notification settings

areox-net/esquisse_nodesign

 
 

Repository files navigation

Esquisse ✍️

Quick AI workflow prototyping.

Esquisse is a light and quick tool for when you need to prototype a generative AI workflow, one level or two above basic prompt engineering.

Draft and test AI ideas, move up from basic prompts to your own mini AI apps.

I (https://github.com/juliendorra) originally built this web-tool so my design students could prototype mini AI-apps in a couple of hours: a fantasy football club generator, with logo and jersey; a user interview template that auto-update according to answers; an idea helper for products; and more!

Why create this mini AI-app builder?

To give users a malleable and generic way to draft AI usages one level or two up from just "prompting". Without code, my design students managed to build AI pipelines… and also asked for a few updates that I added and tested with them 😅

Install and use

You can use Esquisse on you own computer by cloning and running the repo: Local usage

Or you can easily deploy on Deno Deploy: Deploy

You will need OpenAI and Stability API keys.

How to create and share mini AI apps?

  • Adds text and image generation blocks
  • Reference and use the result from a text block in another text or image block top 'Data' cell by using either #name (no white space, for example a single word block name) or [name of the block] (white space allowed in the name of the block)
  • You can mix and match several text results with static text: head face [character for head] #style
  • ⟳ button refresh a block result by sending a new request
  • The structure of your AI cells is saved in the URL: names, data text, transform text. Share the URL to share the structure (not the results). You can go back to reload a previous structure.

Set UI/UX Hints on blocks

  • 📥 button set the block as an entry block, only the data cell is writable.
  • 🔒 button set the block as an locked block, no cell is writable.

These are purely UI/UX hints to help you organize your mini-app, and can be reversed any time. These cells keeps updating normally when the results they reference update.

Examples:

Building an AI Cadavre Exquis app in 12 minutes (sped up!)

Esquisse.Building.an.AI.Cadavre.Exquis.app.in.12.minutes.-.01.mp4

[early version] Screenshot of a simple app that generates three images combining a character and scene as paintings from the the 16th, 17th and 19th century:

screenshot of a simple app that generates three images combining a character and scene as paintings from the the 16th, 17th and 19th century

Students at Strate in the process of creating apps:

Local dev

  • install Deno locally https://docs.deno.com/runtime/manual/

  • clone the repo locally

  • create your local .env file based on .env.SAMPLE

  • add your OpenAI and Stability API keys

  • add at least one local user

  • for quick local dev you can copy the users from the .env.SAMPLE

  • deno cache main.ts

  • deno task dev

  • visit http://127.0.0.1:8000/ to use

Deploy on Deno Deploy

The code has been written with deployement on Deno Deploy in mind, in a few easy steps:

Environnement variables: API Keys and users

  • Add your OpenAI and Stability API keys in your Deno Deploy Settings / Environnements Variables
  • Add users for your instance. Prefixed user name as key and Bcrypt hashed password as value.
  • Prefix the user name with USER_
  • You can use a tool like https://bcrypt.online to generate the password hashes
screenshot of Deno Deploy Settings / Environnements Variables with API keys and an user being added

Deploy

  • link the repo in Deno Deploy Dashboard in automatic mode
  • pick main.ts as the entry point

About

Quick prototyping tool to create AI workflows one level or two above prompt engineering

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 68.0%
  • HTML 25.3%
  • TypeScript 6.7%