Canva-scape

Landing page for the extension
Auth URL asking for users' permissions/consent
AI playground section
Assets and designs along with oter things in the extension
Edit/view links for designs
Object Removal Model (sleecting the object)
Object removal Model Output
Input for upscale model
Enhanced output for the upscale model

🌟 Inspiration Corner 🌟

"Every great innovation begins with a simple idea, but the passion and vision behind that idea truly brings it to life. Our project is a shining example of this philosophy. By integrating the Connects API with Canva, we’re not just creating a tool but opening doors to endless possibilities for creators everywhere. In a world where creativity meets technology, our work stands at the intersection, guiding users toward a future where design is more accessible, intuitive, and powerful than ever before.

As Connects API evolves, so does the landscape of creative potential. Our efforts to refine and enhance the way users interact with Canva are not just about making tasks easier; they’re about empowering individuals to express themselves in ways they never thought possible. We’re turning dreams into designs, concepts into canvases, and ideas into impactful realities

This journey isn’t just about the technical achievements, though they are impressive. It’s about the impact we’re making on the creative community, enabling artists, designers, and everyday users to push the boundaries of what’s possible. In a world filled with noise, our project is a beacon of clarity, showing us all how technology can enhance, rather than overshadow, human creativity.

What it does

Our project is a feature-rich extension designed to elevate your Canva experience to new heights by blending advanced AI models, intuitive browser integrations, and enhanced asset management.

1. AI-Powered Models: One of the heavy-lifters in our project. These are not just read-made AI models, we have trained these according to our needs and we are proud of the fact that they are running so well. There are a total of 3 models with which one user can play around with that.

Model	What It Does	Base Model
Object Removal	Easily remove unwanted elements from images, giving you a clean and professional final product	Llama's inpainting
Upscale	Enhance the resolution of images without losing quality, perfect for making your visuals stand out	Real-ESRGAN
Art Transfer	Apply unique artistic styles to your images, transforming them into stunning pieces of digital art with just a click	Google's arbitrary-image-stylization-v1

Only registered users can use those models by navigating to the AI Playground webpage, which is available at https://versatilevats.com/canva

2. Omnibox Integration: What is an omnibox?: The omnibox is essentially a term used to describe the address bar in web browsers. It's where you can enter web URLs, search queries, and see suggestions as you type.

We incorporated the Omnibox features into our project to enhance the user experience by providing seamless access to Canva's functionality directly from the browser's address bar. With the Omnibox, users can quickly search for designs, and switch between open tabs, and group-related tabs, all without leaving the current page. This feature not only streamlines workflow but also integrates powerful AI tools like object removal, upscaling, and art transfer directly into the user's browsing experience, making Canva more accessible and efficient for creative tasks. Let's have a look at the various Omnibox commands that a user can type in:

NOTE: To start using the Omnibox commands, type in canva in the address bar and hit space. Then you would see Canva-scape written in the address meaning that your commands would be sent to the extension.

🟡 ai: Navigate to the AI playground section quickly, by typing in this

🔴home: If you ever need to go to the Canva homepage, use this command and you will be taken to https://www.canva.com

🟠 projects: The Projects page is never far from the user, as just by typing this you can go to https://www.canva.com/projects

🟢 d design_name: One of the dynamic commands, that one can use to interact with the Designs API. After typing in "-d", write in the query for which the designs should be retrieved around. For example: -d adaptive routing, and it would open the design that best suits the query. Not only this, view and edit URL links get opened automatically

🔵 s title/name of the design: If you ever get lost in multiple Canva tabs (like we did at the start of the video 🤣), then you can use this feature and the extension will search out the already existing Canva tabs, and would switch to the tab which matches to your input

Tab Switching & Grouping: Seamlessly switch between Canva tabs or group them for a more organized workflow, all from the group button in the extension. It groups all of the opened Canva tabs in a single group giving a pleasant and clean browser UI.
Saving a web image as an asset: Turn any image you find on the web into a Canva design with a simple right-click, streamlining your creative process. Just right-click on any image and then select the "Add to Canvas as a Design" context to first convert that image into an ASSET using the ASSETS API and then use that in creating a new design.
In-Extension Access: Manage your Canva assets and designs directly from the extension. This allows for quick access and management without needing to navigate away from your current tab.

Together, these features transform Canva into a powerful, AI-driven design platform that not only enhances your creativity but also simplifies your workflow. Whether you’re a professional designer or a casual user, our extension brings advanced tools to your fingertips, making every design process smoother, faster, and more enjoyable.

How we built it

We used the Connects API to make this project. Specifically talking about the APIs, you can find the details below:

API	Endpoint
Assets API	Create asset upload
Designs API	Create design
Folders API	List folder items
Users API	Get current user, and Get current user profile

All of the AI models are being written in PYTHON and made available as a Flask server so that the UI can send requests to them. Apart from this, we have used Node JS to handle the backend for the Integration and we are proud of the fact that how it panned out.

Challenges we ran into

We faced several challenges while integrating advanced AI models into a seamless user experience within the extension. Handling multiple APIs simultaneously, ensuring smooth omnibox functionality, and managing complex browser interactions required significant problem-solving. Debugging and refining these integrations to work across different user scenarios was particularly demanding, pushing us to think creatively and iteratively.

1️⃣ Handling the oAuth flow for the integration was very difficult and challenging

2️⃣ Using the APIs was very easy, but we had to tweak our skills a lot so that we could model/save the data in the extension's local storage

3️⃣ The AI models were the toughest, as we not only had to train them but made them available so that they listen to the incoming requests.

Accomplishments that we're proud of

We’re incredibly proud of creating a feature-rich extension that successfully merges cutting-edge AI with intuitive browser functionality. Overcoming technical hurdles to deliver a seamless and efficient user experience, especially with the Omnibox and real-time Canva integration, stands out as a key achievement. Our ability to translate complex AI tasks into user-friendly tools has significantly enhanced Canva’s utility for creative professionals.

What we learned

This project taught us the value of persistence and adaptability in the face of technical challenges. We deepened our understanding of API integration, browser extensions, and how to effectively harness AI to enhance user experience. We also learned the importance of user-centred design, ensuring that each feature not only functions well but also adds real value to the user's creative process.

Using an extension to the fullest, as we used many advanced features that modern browser extension provides, and we had a blast doing that as we enjoyed every bit of it.

What's next for Canva-scape

As of now, we utilise the Connects APIs to the best we can, and we think that as time progresses, we would love to integrate more of the APIs that would be integrated into the ecosystem.