[Video] Let's Build a DALLE-3 UI Using Elixir & Livebook

• 1 min read

Video

Code

openai_api_key = System.fetch_env!("LB_OPENAI_API_KEY")

form =
  Kino.Control.form(
    [
      prompt: Kino.Input.textarea("Prompt"),
      size:
        Kino.Input.select(
          "Image size",
          ["1024x1024", "1792x1024", "1024x1792"] |> Enum.map(&{&1, &1})
        )
    ],
    submit: "Generate"
  )

frame = Kino.Frame.new()

Kino.listen(form, fn %{data: %{prompt: prompt, size: size}} ->
  IO.inspect("Generating...")

  case Req.post("https://api.openai.com/v1/images/generations",
         json: %{model: "dall-e-3", prompt: prompt, n: 1, size: size},
         auth: {:bearer, openai_api_key}
       ) do
    {:ok, response} ->
      IO.inspect("Got url")
      [image | _] = response.body["data"]
      image_url = image["url"]

      image_contents = Req.get!(image_url).body

      Kino.Frame.append(frame, Kino.Image.new(image_contents, :png))

    _ ->
      nil
  end
end)

Kino.Layout.grid([form, frame])
Be the first to cheers
Now look what you've done 🌋
Stop clicking and run for your life! 😱
Uh oh, I don't think the system can't handle it! 🔥
Stop it, you're too kind 😄
Thanks for the love! ❤️
Thanks, glad you enjoyed it! Care to share?
Hacker News Reddit

Hey 👋, thanks for reading!

I am currently looking for my next job.

If you know of someplace that might be a good fit for me, I'd really appreciate an intro: mail@samrat.me

Recommended Posts ✍🏻

See All »
• 6 min read
TIL: Sum Types With `instructor_ex`
Read Post »
• 1 min read
TIL: File Uploads Using the Req Elixir Library
Read Post »
• 5 min read
[Video] Testing Google Gemini Audio Capabilities
Read Post »