# Decentralized Applications on Bacalhau ## Powering the intelligent web Make your apps,websites intelligent in a very easy to integrate way as stripe Widgets that work anywhere For this we need to support having a server or making jobs run as fast as api requests and reducing the response time to few seconds, also batching multiple jobs which just have different input CIDs can make jobs run much quicker Non compute intensive jobs can be run in the browser using Docker+WASM or IPVM instead of running them bacalhau we would load them from IPFS and run them in the browser, DOS attacks can be prevented using UCAN and DID which would limit the number of requests and increasing the request limit which will require payment authorization A Developer wants to Create an UI that acts as frontend client and submits jobs to the Bacalhau Network and then display the results It can make bacalhau accessible to the general audience, Bacalhau can act as a backend to various kind of applications, for many applications an UI is a better choice than CLI as there are multiple advantages like client can connect their wallets to Apps which is easier to do in the browser ## Stable Diffusion Studio Suppose a user enters the following prompt **Cat Eating COD** It will display a synthetically generated image **Note Please press generate button more than once if the image isn't displayed, the WASM binary takes some time to load from the IPFS gateway** <html> <body> <iframe src="https://ipfs.io/ipfs/bafybeiekl3mvhayrqxxsinkvd2ci3tyl3vaykc32lgzboknerv7iutyj5i/" title="Bacalhau Stable Diffusion" width="900" height="512"> </iframe> </body> </html> [ipfs://bafybeiekl3mvhayrqxxsinkvd2ci3tyl3vaykc32lgzboknerv7iutyj5i/]() This is a simple example of an application which is hosted on IPFS which can be directly opened in brave browser But for other browsers this can be accessed through a gateway https://ipfs.io/ipfs/bafybeiekl3mvhayrqxxsinkvd2ci3tyl3vaykc32lgzboknerv7iutyj5i/ It can be also embeded in websites as shown above using iframe This Example is created using just HTML and GOWASM A developer writes functions in go that accepts parameters from UI and then pass it to functions from the bacalhau package to create jobspec and then submit it to the the network So instead of submitting job via the http API which is fragile due to the jobspec changes, they can directly use bacalhau packages we can also build a WASM binary which consists of all the client side functions which can be directly used by frontend developers instead of building their own WASM binaries We then utlize websockets in the client to check the status of a job instead of polling and if the job is completed we display its outputs The "syscall/js" package enables us to convert go functions that is converted into global javascript function to pass in the arguments from the UI ``` package main import ( "fmt" "syscall/js" ) func GenerateImage(this js.Value, args []js.Value) interface{} { // Accept arguments from the UI key := args[0].String() // Pass those arguments to Bacalhau functions to create a jobspec and then submit a job to the network fmt.Print(key) return "https://ipfs.io/ipfs/QmZr2QPkwccxe2d7dCaZboRNXvTcevEmnQwRLh2LJJbmae/outputs/image0.png" } func main() { js.Global().Set("GenImage", js.FuncOf(GenerateImage)) var c chan struct{} <-c } ``` The we build the WASM file ``` GOARCH=wasm GOOS=js go build -o genimage.wasm main.go ``` Upload the WASM file and WASM_exec.js file to IPFS In index.html file we load the WASM file and wasm_exec.js stored on IPFS into the users browser via https IPFS gateway and pass in the arguments to the function which will return the outputs, the display the results ** NOTE The section below only is to demonstrate the advantages of having a rich UI and not entirely related to the topic discussed above** It much better to have an UI for a DAG like airflow or kubeflow, The display of information about a DAG is much easier to understand in an interactive UI rather than in a CLI So when a user writes a DAG job in a YAML and uploads it to the UI they can see the structure of the pipeline ![](https://i.imgur.com/mg7y5Mz.png) After they can change the parameters if they want ![](https://i.imgur.com/A6Iyt92.png) After submitting they can check the status of each step in the pipeline and it would contain all the information related to a particular step like it logs outptus etc ![](https://i.imgur.com/T8QRmlr.png) ![](https://i.imgur.com/LdidamY.png) UCAN authorization DID authentication