EcoDraft

Landing Page
Schematic Drawing
AI Image Generation
Azure Resources
KeyVault Secrets Security
Terraform Snippet

Inspiration

Cranek2 is an architecture major attempting to minor in CS. This Hackathon on Urban planning was the perfect opportunity to blend our interests in software engineering and architecture. Phuthai450 just wants to learn the Blazor stack for personal experience.

What it does

The app has 3 different main functionalities:

Create classic building schematics based on room layouts, and generate general statistics based on it
Create building schematics based on materials, to generate statistics about sustainability
Render 3D buildings using 2D schematics

How we built it

Everything related to the application is built in the dotnet framework, specifically on a Blazor Web App. The languages used are C#, html, and css. The application renders images in DALLE.

The infrastructure is deployed using Terraform, including resources like the resource group and a storage account. For security purposes, the DALLE rendering requires an API token from OpenAI. This token is stored as a secret in KeyVault. The secret is only accessible by a security group owned by myself.

Challenges we ran into

The learning curve for C# is quite sharp. OpenAI's api is not C# friendly. Their online LLM chat for ChatGPT allows both images and text to be used as prompts to generate images. Their API is unable to handle this, only allowing for text outputs, or image outputs with text-prompts. This was a large red herring that took away a lot of time.

Visual Studio was deprecated for MACOS very recently. I had to get JetBrains Rider, and constantly doing dotnet clean, dotnet restore before git commits to allow for Windows and MACOS versions of the application to run was a hassle.

You will notice the ability to draw with your mouse. This was custom made. For a while, we were unable to get NuGet packages that could've saved time in creating drawings.

Accomplishments that we're proud of

Building an entire web app in a framework we've never used prior. This was Cranek2's first Hackathon, and phuthai450's second Hackathon.

What we learned

Cranek2 learned a LOT about web/application development. Anything beyond Introduction to CS1 with Python was a learning experience. Greatest takeaway was how multiple languages could interact with each other.

Phuthai450 was happy to learn about Blazor and get better at C# for his day job.