Julia Community 🟣: Pere Giménez

Importing Genie Builder apps for deployment on Genie Cloud

Pere Giménez — Tue, 13 Jun 2023 14:51:55 +0000

Today we’re rolling out some major upgrades to Genie Cloud; see the changelog here.

1. We’ve made it easier for Genie Builder users to import their apps for deployment on Genie Cloud. Simply zip and 📤 upload your Genie Builder app via the import menu, or clone the code straight from a GitHub repo. Check our walkthrough video to see how it works. 👇

For those with Genie Framework apps - support is on the horizon, so stay tuned!

2. 💡 We've pre-loaded two demo apps in your workspace to help you explore Genie Cloud.

You can experiment with them in the development environment:

Edit or add UI components using our drag & drop no-code editor
Try the Genie UI Assistant (powered by GPT-4!) to edit, add and style components with natural language
Deploy on a public URL

3. 💪 Genie Cloud is more stable and faster. We've upgraded the platform to Julia 1.9 for increased performance and have enhanced our infrastructure for better resilience. Plus, we've squashed all major bugs. 🚫🪲

Genie Cloud is in private beta but we’re inviting users regularly.

If you haven’t signed up for a free account yet, it’s a great moment to do so: https://www.geniecloud.io/

Introducing Genie UI Assistant: the AI-powered UI builder for Genie apps

Pere Giménez — Tue, 09 May 2023 16:22:41 +0000

We are excited to announce the release of Genie UI Assistant – an AI-powered UI builder designed to help Genie users create UIs faster, using natural language.

‍

Powered by GPT-4, tailored to Genie users

Developed with GPT-4, Genie UI Assistant enables Genie Cloud and Genie Builder users to quickly add and edit UI components - simply by prompting. And it goes beyond just passing user prompts to GPT-4. By knowing the context of a Genie app, Genie UI Assistant is able to output more accurately the frontend code Genie users need for their web apps, saving them valuable time.

‍

Integrated with our no-code editor to help you build web apps faster

Genie UI Assistant seamlessly integrates with our no-code editor, enabling users to streamline frontend development of their web apps by combining AI prompting with our drag-and-drop builder.

For instance, users can swiftly create layouts by dragging and dropping UI components, then prompt Genie UI Assistant to edit, configure, and style those components quickly, without needing to interact with a properties editor or write any HTML/CSS/JavaScript code. This integration makes developing sophisticated, visually appealing UIs more efficient, empowering Genie users to build web apps faster than ever.

‍

How it works

In the no-code editor, navigate to the properties menu on the right and locate the Genie UI Assistant. Select the component you'd like to edit, and describe how you'd like to change it in the prompt field. Submit your prompt, and preview the change after a few seconds. You can change and resubmit the prompt or discard the change altogether. If you like the preview, save your file in the no-code editor and continue building your app.

Let's see Genie UI Assistant in action with a few examples below.

How to get Genie UI Assistant

To start using Genie UI Assistant users have two options:

1) Download Genie Builder, our plugin for VSCode: open the no-code editor, navigate to properties, locate the Genie UI Assistant menu, and follow the instructions.

2) Sign up for a Genie Cloud account and await private beta access. Genie Cloud offers a hosted version of Genie Builder, complete with the integrated Genie UI Assistant. It also allows users to deploy their apps effortlessly in just one click.

Genie UI Assistant is free for testing with some usage limits. If you need more extensive access, please contact us. And don’t forget to share your feedback on Discord to help us make it better with the next iterations.

‍

The Genie team

Genie Builder v0.3 makes it easier to build UIs with no-code

Pere Giménez — Tue, 18 Apr 2023 16:03:28 +0000

Hey everyone 🚀! We’ve released Genie Builder v0.3, an improved version of our no-code UI builder. 🌟 Key updates include:
1️⃣ Side-by-side app preview for seamless development
2️⃣ Quick app export via download button
3️⃣ Enhanced tooltips to better understand component properties

👉You can download or upgrade Genie Builder via VSCode to run it locally: https://marketplace.visualstudio.com/items?itemName=GenieBuilder.geniebuilder

👉 OR Sign up for a free Genie Cloud account for a managed version with one-click deploys: https://www.geniecloud.io/

Genie Cloud: the new standard for building Julia web apps

Pere Giménez — Wed, 29 Mar 2023 15:05:47 +0000

We're thrilled to announce the launch of Genie Cloud, a low/no-code platform for quickly building web applications around your Julia code.

Genie Cloud is designed to help data scientists and researchers productize their Julia models with interactive, shareable web apps - without having to worry about frontend, backend development, or hosting.

Powered by the Genie Framework

Genie Cloud is built on top of Genie Framework, the open-source Julia web framework we've been developing since 2016. Thanks to the Julia community and its contributors, Genie Framework has become the most widely adopted package for building web apps and APIs in Julia, accumulating 2k GitHub stars and over 65k downloads.

But the feedback we've been consistently receiving from the community is that Genie Framework can be daunting for the typical Julia user - a data or research scientist with little to no web development skills.

So our team set out to abstract away the complexities of web development with easy-to-use and highly productive no-code tooling.

Built around Genie Builder, our popular no-code plugin

In 2022, we raised venture capital to bring our vision to life and launched our first no-code product - Genie Builder, a VSCode extension with a drag & drop UI builder. Since its release in late July 2022, Genie Builder has been used by over 1,000 data scientists and R&D engineers around the world.

Genie Cloud takes Genie Builder to the cloud, offering a smoother, more productive user experience, including improved no-code UI capabilities and for the first time, one-click deployments.

For beginners and power users alike

Beginners will find Genie Cloud easy to use. Building a simple dashboard app for example, only takes a few minutes. Add your Julia data analysis code, build the UI with the no-code editor, implement the app logic with macros, and deploy with one click.

For the power users who want to build more complex data products, Genie Cloud can be extended by Genie Framework which offers a low-code UI library, 1st party plugins, backend and ORM libraries.

Our users are building a wide variety of apps with Genie Cloud already. Data scientists are building dashboards for data exploration and analytics; actuaries are creating data products for risk modeling; ML engineers and researchers are building apps that run (and show off!) ML models or simulations. Software engineers are building internal tools like frontends for info management systems; aerospace engineers are creating apps to manage lab equipment. We can't wait to see what more they will build with Genie Cloud.

Launching in private beta, with a free community tier

Genie Cloud is launching in private beta, with new invites being sent gradually every week. Register to join the waitlist or book a demo if your team or company wants a walkthrough.

Julia is a language on the rise for computationally demanding applications. At Genie, we strive to serve the Julia community with highly productive, accessible web development tools that enable them to share their work more easily and have greater impact on their organizations.

So we're excited to make Genie Cloud available with a free community tier. To get started, check our Resource Hub for guides and tutorials, and join our Discord for community support.

The Genie team

‍

How to quickly turn your Julia code into a web app with Genie Builder

Pere Giménez — Wed, 14 Dec 2022 17:36:00 +0000

Data scientists don't usually start writing full-blown web apps from the get-go. Instead, we begin with the typical including data cleaning, exploratory analysis, testing of several models, etc., and only when we're confident in the quality of the insights extracted from the data do we start thinking about publicly sharing them with a web application. The Genie Framework comes in very handy for this last step as it allows you to implement an interactive web UI so that:

You can share your insights with just a link.
Other people can re-run the analysis and fine-tune the insights through the controls in the UI.

All of this without writing a single line of HTML or Javascript thanks to Genie Builder's no-code editor.

In this week's tutorial, I'll show you how to go from your existing Julia code to a Genie app in just a few steps. The code for the example app can be downloaded here, take a look at the figure below to see what it looks like in a browser.

1. Writing the data analysis code

To illustrate the Genie workflow, we'll write some code to extract insights from the German Credit Risk dataset. This dataset contains information about 1000 people, where each person is described by 20 features such as age, sex or credit amount. Additionally, every person has been manually labelled as "good credit risk" or "bad credit risk" according to the feature values.

Say we want to extract the following insights from the dataset:

Number and monetary amount in good and bad credits.
Credit amounts and creditor ages.
Number of credits by age range.

To calculate these metrics, save the code below to a script germancredits.jl and execute it in a Julia REPL to make sure everything is working.

 using DataFrames, Dates, OrderedCollections

 function good_bad_credits_stats(data::DataFrame)
     good_credits_count = data[data.Good_Rating .== true, [:Good_Rating]] |> nrow
     bad_credits_count = data[data.Good_Rating .== false, [:Good_Rating]] |> nrow
     good_credits_amount = data[data.Good_Rating .== true, [:Amount]] |> Array |> sum
     bad_credits_amount = data[data.Good_Rating .== false, [:Amount]] |> Array |> sum

     (; good_credits_count, bad_credits_count, good_credits_amount, bad_credits_amount)
 end

 function credit_age_amount(data::DataFrame; good_rating::Bool)
     data[data.Good_Rating .== good_rating, [:Age, :Amount]]
 end

 function credit_no_by_age(data::DataFrame; good_rating::Bool)
     age_stats::LittleDict{Int,Int} = LittleDict()
     for x in 20:10:90
       age_stats[x] = data[(data.Age .∈ [x:x+10]) .& (data.Good_Rating .== good_rating), [:Good_Rating]] |> nrow
     end
     age_stats
 end

 # testing the functions
 using CSV
 data = CSV.File("german_credits.csv") |> DataFrame
 @show good_bad_credits_stats(data)
 @show credit_age_amount(data, good_rating=true)
 @show credit_no_by_age(data, good_rating=true)

Now that the analysis code is finished and working, it's time to make it into a Genie app.

2. Creating a new app in Genie Builder

We'll use the Genie Builder plugin for VSCode to build the app. After installing the plugin, start the GB server and create a new app named GermanCredits. Click yes when asked if you want to start it, and the no-code editor will appear.

In the workspace tab, you'll find that the newly-created app's code is split into two files: app.jl and app.jl.html. Of the two, app.jl is the one to be manually edited whereas app.jl.html is written to by the no-code editor. At this point, you can add the script germancredits.jl to the workspace to have all your files in one place.

To avoid conflicts, it is recommended to wrap the code in a module and remove any testing code. So, edit germancredits.jl to make it look like this:

 module GermanCredits
     export good_bad_credits_stats, credit_age_amount_duration, credit_data_by_age
     using DataFrames, Dates, OrderedCollections

     function good_bad_credits_stats(data::DataFrame)
         ...
     end
     function credit_age_amount(data::DataFrame; good_rating::Bool)
         ...
     end
     function credit_no_by_age(data::DataFrame; good_rating::Bool)
         ...
     end
 end

To install the required packages DataFrames, Dates and OrderedCollections within the app, launch Genie Builder's Package Manager by right-clicking on the app's name on the left sidebar. You'll see the installation progress in the REPL, and the package versions will be added to the Project.toml file.

Next, we'll design the UI to display the data insights.

3. Designing the UI in Genie Builder's no-code editor

For the German Credits UI, we want to have:

Page title header.
Badges showing the number of credits and their monetary amount.
A range control to filter the age of the people whose data is displayed.
A bar chart displaying the number of credits by age.
A scatter plot displaying age vs. amount for each credit.

To build the UI with the no-code editor, look for the components you need in the right sidebar and drag them onto the canvas. Start with the header, rows and columns to set the page layout:

Next, add the following components:

Paragraph (x4).
Range.
Bar.
Scatter.

Finally, let's make the font of the number badges bigger. Click on the </> icon and change the class of the <p> element to bignumber. Then, add a new CSS style .bignumber{font-size:40px; text-align:center;}.

To preview the UI, click on the monitor icon next to the GET tab in the left sidebar. Note that nothing works yet, you still have to implement the app's logic and bind the UI components to the Julia code.

4. Implementing the app's logic

To make the app interactive you have to implement its logic by:

Exposing reactive variables from the Julia code to the UI.
Writing reactive code to handle user interaction.
Binding the exposed variables to the UI components.

The file app.jl in the workspace is the main entry point to the app, and it's where you'll write the logic. This is what the file looks like by default:

 using GenieFramework
 @genietools

 @handlers begin
   @out message = "Hello World!"
   @onchange isready begin
     @show "App is loaded"
   end
 end

 @page("/", "app.jl.html")

To start with a clean app, delete the contents of the block delimited by the @handlers macro. Then, include the GermanCredits package and load the dataset by adding the following code before it:

 include("germancredits.jl")
 using .GermanCredits
 using GenieFramework, CSV, DataFrames, OrderedCollections

 const data = CSV.File("german_credits.csv") |> DataFrame

Next, we'll add the reactive variables and code for each element in the UI. Since we want to filter the data to show only a certain age range, let's start with the range selector.

Range selector

In Genie apps, reactivity is based around two concepts:

Variables are exposed to the UI by tagging them with the @in macro if they take their value from the UI, or with the @out macro if they output their value to the UI.
The code to handle interactions is written in the block delimited by the @onchange macro, which watches a variable and whenever it changes executes the code in the block.

To filter the data via the range selector in the UI, we need:

A variable of type RangeData to store the range selected in the UI.
A DataFrame to hold the filtered data.
A function call to update the available data when an age range is selected.

To implement these elements, add the following code inside the @handlers macro:

 @handlers begin
     @in age_range::RangeData{Int} = RangeData(18:90)
     @out filtered_data = DataFrame()
     @onchange age_range begin
         filtered_data = data[(age_range.range.start .<= data[!, :Age] .<= age_range.range.stop), :]
     end
 end

Note that the variables have default values so that the UI can be rendered when the page loads. Now, go to the no code editor, select the Range component and assign the age_range variable to its Data Binding field.

That's it for the range selector. Any time you move one end of the slider in the UI, the contents of filtered_data will be updated. Let's continue with the next element to show the updated insights.

Number badges

To display the number and amount in credits, you'll need:

Variables to store the quantities.
A call to good_bad_credits_stats to update the variables when a new range is selected.

 @handlers begin
     ...
     @out good_credits_count = 0 
     @out bad_credits_count = 0
     @out good_credits_amount = 0
     @out bad_credits_amount = 0
     @onchange age_range begin
         ...
         good_credits_count, bad_credits_count, good_credits_amount,
         bad_credits_amount = good_bad_credits_stats(filtered_data)
     end
 end

To show the number badges in the UI, assign each variable to the Text Binding field of a Paragraph component.

Number of credits by age plot

We'll plot the credits by age with a bar plot indexed by the age ranges in 10 year increments. For this, you'll need:

An array to hold the x axis labels.
An array of PlotData to hold the plot data.
A variable of type PlotLayout to specify the plot layout.
Reactive code to update the plots with the values calculated by credit_no_by_age.

 @handlers begin
     ...
     @out age_slots = ["20-30", "30-40", "40-50", "50-60", "60-70", "70-80", "80-90"]
     @out credit_no_by_age_plot = PlotData[]
     @out credit_no_by_age_plot_layout = PlotLayout(barmode="group", showlegend = true)
     @onchange age_range begin
         ...
         credit_no_by_age_plot = [
             PlotData(
                 x = age_slots, 
                 y = collect(values(credit_no_by_age(filtered_data; good_rating = true))),
                 name = "Good credits", 
                 plot = StipplePlotly.Charts.PLOT_TYPE_BAR, 
                 marker = PlotDataMarker(color = "#72C8A9")
             ),
             PlotData(
                 x = age_slots, 
                 y = collect(values(credit_no_by_age(filtered_data; good_rating = false))),
                 name = "Bad credits", 
                 plot = StipplePlotly.Charts.PLOT_TYPE_BAR, 
                 marker = PlotDataMarker(color = "#BD5631")
             )
         ]
     end
 end

Age vs. credit amount scatter plot

For this plot, you'll require:

An array of PlotData to hold the plot data.
A variable of type PlotLayout to specify the plot layout.

 @handlers begin
     ...
     @out age_amount_plot_layout = PlotLayout(showlegend = true)
     @out age_amount_plot = PlotData[]

     @onchangeany age_range begin
         ...
         dgood = credit_age_amount(filtered_data; good_rating = true)
         dbad = credit_age_amount(filtered_data; good_rating = false)
         age_amount_plot = [
             PlotData(
                 x = dgood.Age, 
                 y = dgood.Amount, 
                 name = "Good credits", 
                 mode = "markers",
                 marker = PlotDataMarker(size=18, opacity= 0.4, color = "#72C8A9", symbol="circle")
             ),
             PlotData(
                 x = dbad.Age, 
                 y = dbad.Amount, 
                 name = "Bad credits", 
                 mode = "markers",
                 marker = PlotDataMarker(size=18, opacity= 0.4, color = "#BD5631", symbol="cross")
             )
         ]
     end
 end

And with this last component, you've finished your Genie app!

5. Running the app outside of Genie Builder

You can run your app locally within VSCode from the Genie Builder Apps menu in the sidebar. However, if you want to run your app outside of Genie Builder, the app's files are located in the folder ~/.julia/geniebuilder/apps/GermanCredits/. Before running the app, you'll have to tell Genie to start a server by adding the following line at the end of app.jl:

 Server.isrunning() || Server.up()

Then, open a REPL with julia --project in the app's folder and type include("app.jl") to launch the app.

Genie Builder v0.2: speed up your Julia app development

Pere Giménez — Wed, 23 Nov 2022 18:07:47 +0000

One of the projects our team at Genie is most excited about is Genie Builder, our no-code UI plugin for VSCode. With it, you can create a UI for your Julia apps without writing a single line of HTML or Javascript. All you have to do is drag and drop the UI components and connect them to the variables in the backend code. Pretty amazing, right?

Today, we're releasing Genie Builder v0.2, a majorly improved version to help you build Julia apps more quickly and productively.

What's new?

We've integrated the new Genie Framework API to create apps with significantly less code.
The no-code UI editor is more powerful and polished, with new default menu selections, automatic loading of binding variables, and much more.
The starting project template is more streamlined, consisting of only two files: one for the logic and one for the view.

To get the new version, simply update Genie Builder in VSCode.

Build your data app in 3 simple steps

Genie Builder streamlines the app development by splitting the implementation into 3 simple steps:

1) Write the data analysis code as you would usually do, no need to worry about UI stuff!

2) Design the UI with Genie Builder's no-code editor in a matter of minutes.

3) Link your Julia code to the UI by exposing variables with the @in and out macros, selecting the data bindings in the no-code editor, and adding reactive code in the @onchangeany macro.

Tutorials

Check out the video below for a step-by-step tutorial in which we build the Iris Clustering demo app using Genie Builder v0.2.

If you need support or have feedback and suggestions, make sure to join our Discord. See you there!