img-crafter

Project Story

After we settled on the idea of Img Crafter for the hackathon, our first step was researching and making sure it could work as an Adobe Express Add‑on. Once we had that confirmed, we spent a week writing, editing, and polishing our three‑minute pitch video. When the video was ready, we still had extra time and were eager to bring the idea to life, so we sketched out mockups, mapped the user interface, and chose our tech stack.

Then, thankfully Adobe extended the deadline by a week, which gave us the perfect opportunity to start building the prototype. We dove into coding each feature: Generate, Edit, Mimic, and building a responsive front-end interface. We spent the last days on deployment, faced a few errors our way, but we worked through them and now have a working prototype running in Adobe Express via a this private link

---

What Is Img Crafter?

Img Crafter is an AI‑powered add‑on for Adobe Express that brings three powerful workflows, Generate, Edit, and Mimic, into a single sidebar. With clear controls, instant previews, and built‑in versioning, you can create new artwork from text, refine existing images with simple instructions, or apply and extract artistic styles—all without leaving Adobe Express.

---

How does Img Crafter work?

1. Generate Tab

The Generate tab lets you turn any plain‑language description into a set of original images. You don’t need design experience or external tools, just type what you want, select a few settings, and let the AI do the rest. Img Crafter calls OpenAI’s GPT‑Image‑1 API to produce your visuals in seconds.

• Prompt Input: Accepts your natural‑language description for the image you need.
  Example: Generate an image of a guitar
  
• Style Selector: Applies a visual style for image generation like photographic, digital art, vector illustration, etc.
  
• Aspect Ratio Buttons: Chooses between square, landscape, or portrait.
  
• Variations Slider: Sets how many unique versions (1–3) the AI should generate.
  
• Generate Image Button: Sends all your settings to GPT‑Image‑1 API service and retrieves images.
  
• Add to Canvas: Inserts your chosen version into Adobe Express.

Examples:

• You can type “whimsical birthday card with balloons and cake,” choose Vector Illustration, and get colorful greeting card designs you can use
• You can enter “a fresh salad on a polished wooden table,” pick Photographic style, and receive appetising food photos that can be used for your menu.

Edit (my personal favorite feature)

Clicking Edit opens a clean editing interface where you can describe what changes you want, like “change background to red” or “make the guitar black”, and it updates the image accordingly.

• Each change creates a new version instead of replacing the old one (branching), so you can experiment without losing earlier versions.
• The Go to option lists each version, allowing you to switch between them and continue editing from any step.

2. Edit Tab

The Edit tab is your all‑in‑one tool for improving or transforming any image. Whether you need a quick retouch, a resolution boost, or to extract text, Img Crafter handles it with natural‑language instructions and fast AI processing—no external software required.

2.1 Normal Edit

Normal Edit lets you describe the adjustments you want in plain English, such as “remove the background” or “add brighter highlights”, and receive a freshly edited image that keeps the parts you like while applying your changes.

• Image Input: Upload an image file.
  
• Instruction Box: Type your edit request.
  
• Generate Edit: Calls GPT‑Image‑1 with your instructions.
  
• Previously generated images are also available here to edit.

Example:

• You can upload a plain photo of a sneaker, type “add a popping background and drop shadow”, now you have a product image ready for your online store.

2.2 Upscale

Upscale increases your image’s resolution and clarity, perfect for printing or large‑format displays. It preserves sharpness and detail without introducing artifacts.

• Image Input: Upload or select an image to enlarge.
  
• AI Upscale Image: Triggers a high‑resolution render via GPT‑Image‑1.

2.3 Extract Text

Extract Text uses Gemini 2.5 Pro Flash API to read any printed or handwritten words in your image. It saves you the effort of manual transcription by returning clean, editable text.

• Image Input: Upload a photo containing text (signs, menus, documents).
  
• Extract Text: Sends the image to the Gemini API.
  
• Text Output Panel: Shows all detected text in an editable field.
  
• Copy: Copies text to your clipboard.
  
• Add to Canvas: Inserts it as a new text layer in your design.

Examples:

• You can upload a picture of a cafe menu and using extract text, all the text from that menu can be extracted. Now its easy for you to directly copy this text and use it in your canvas.
• You can upload a page of handwritten notes, click Extract Text, see every word extracted and ready to be used just by copying and pasting it.

3. Mimic Tab

The Mimic tab helps you apply or recreate artistic styles effortlessly. You can restyle an existing photo, generate new scenes in a chosen aesthetic, or pull a color palette from any image and apply it to your text.

3.1 Transform Image

Transform Image transfers the look of one picture, its colors, textures, and art style, to another. It’s like painting your photo in the style of any reference artwork.

• Style Reference: Upload an image whose style you want to recreate.
  
• Target Image: Upload the photo you want to restyle.
  
• Apply Style: The AI blends elements of the reference into your target, producing a new image.

Examples:

• You can upload Van Gogh’s Starry Night as a style reference, upload any landscape, and get a swirling, painterly version of that picture in Van Gogh's art style.
• Use the Starbucks logo pattern as a style reference, upload a plain white t-shirt picture, you can create printed t-shirts with green siren designs.

3.2 Generate New

Generate New combines any style reference with a fresh prompt to create entirely new images that match both the visual mood and your description.

• Style Reference: Upload the artwork or image that you want as reference.
  
• Prompt Box: Type what you want the image to depict.
  
• Generate with Style: Calls GPT‑Image‑1 to synthesize a brand‑new image in that style.

Examples:

• You can upload a Studio Ghibli image as a style reference, type “A floating library in the clouds,” and get a dreamy illustration in that animation style.
• Upload a Marvel comic cover as a style reference, type “futuristic city on Mars,” and you can generate your own new comic‑book scene in Marvel's Style.

3.3 Color Palette

Color Palette extracts the dominant colors from any image and offers recommendations for text formatting, ensuring your design’s hues stay harmonious.

• Image Input: Upload the photo you’d like to sample.
  
• Extracted Colors: The tool picks out five main colors and displays their HEX codes.
  
• Typography Suggestions: Advises which swatch works best for headings, subheadings, and body text.

---

Backend Overview

The creation process of Img Crafter: From the ideation to creating designs, and sketching mockups/prototypes to finally building the finished working model.

Img Crafter uses powerful AI models behind the scenes to deliver image generation, editing, and text extraction features. While the frontend lives inside Adobe Express, the core functionality is handled by a combination of AI APIs and Adobe’s own systems.

AI Models Used

1. Image Generation – GPT‑Image‑1 (by OpenAI)

   • Used for all image generation tasks across Generate, Edit, and Mimic tabs.
     
   • Development used low quality output for testing; private deployment uses medium quality.
     
   • Plan to add high quality output in the public version with a credit-based system.

2. Text Extraction – Gemini 2.5 Pro Flash

   • Powers the Extract Text feature inside the Edit tab.
     
   • Accurately extracts text from uploaded images and returns editable text.

Adobe Integration & Deployment

• Img Crafter is fully built as an Adobe Express Add‑on.
• All backend integrations, user interactions, and data flow happen through Adobe’s internal systems.

Deployment

• The Img Crafter add‑on is currently deployed privately inside Adobe Express. It is accessible through a private link that can be shared.
• This version is fully functional, includes all major features (Generate, Edit, Mimic), and is being used to test and fine-tune the product.

---

Plan to Ship

Week 1: Credit System, High‑Quality Mode & Basic Authentication

Days 1-4: Credit System & High‑Quality Mode

• Add High‑Quality Output Toggle: We’ll introduce a new setting in Img Crafter’s Generate tab that lets users switch between Low, Medium, and High quality modes. Right now, the private prototype uses Medium quality; we’ll extend this so that when a user flips the High Quality toggle, the backend calls OpenAI’s GPT‑Image‑1 with its highest fidelity setting.

• Design & Develop Credit Mechanics: To manage usage of these quality levels, we’ll build a simple credit‑based system:

  • Initial Credit Grant: Every new user receives 10 free credits upon first use.
  • Credit Costs:
  • Low Quality: 1 credit per image
  • Medium Quality: 3 credits per image
  • High Quality: 5 credits per image

Credit Tracking: We’ll add front‑end counters showing remaining credits, and back‑end logic to deduct the correct amount each time an image is generated. If a user runs out of credits, a prompt will appear offering to purchase additional credits.

Days 5–6: Authentication Research

• Investigate Adobe’s recommended approach for basic user authentication within Express add‑ons (e.g., OAuth or Adobe I/O credentials).
• Document how to securely obtain and validate a user’s identity before allowing access to the image‑generation features.
• Outline required UI components (login button, status indicator) and flow diagrams for the authentication process.

Week 2: Implement Authentication, User Data & Monetization Research

Days 1–2: Build & Test Authentication

• Implementation:

  • Integrate the chosen authentication method into Img Crafter’s panel: add a Sign In button and status message.
  • Ensure that generation, editing, and mimic features are gated behind successful login.

• Cross‑Device Testing:

  • Test the login flow on desktop and mobile views in Adobe Express.
  • Verify session persistence, logout behavior, and error handling.

Days 3–4: User Data Storage

• Database Setup:

  • Research and choose a simple database solution.
  • Design schemas for:
  • User Profiles, Image Records, Credit Transactions, Style Preferences.

• Integration:

  • Connect Img Crafter’s backend to read/write these collections whenever a user generates an image, spends credits, or updates settings.

Days 5–7: Monetization Platform Research

• Credit Purchase Workflow:

  • Explore payment gateway options compatible with Adobe Express add‑ons.
  • Map out the user flow for purchasing credits.

• Pricing Structure:

  • Research standard credit‑for‑dollar ratios and competitor pricing for similar AI services.
  • Draft tiered packages (20 credits for \$5, 50 credits for \$12, 100 credits for \$20).

Week 3: Marketing & Community Outreach

Days 1–3: Strategy & Content Creation

• Audience Research:

  • Identify key communities on Twitter, Reddit (communities), and relevant Discord groups.
  • Note peak engagement times and popular hashtags.

• Content Plan:

  • Draft a social media plan covering product teasers, feature demos, and other posts.
  • Create visual assets: short video clips of Img Crafter in action, branching edits, and sample before/after images.

Days 4–7: Execution & Engagement

• Scheduled Posting:
  • Share the prepared demo videos and highlight unique features of Img crafter on timely schedule.
• Community Interaction:
  • Respond to comments, answer questions, and gather early feedback.
  • Monitor engagement metrics (likes, shares) and adjust messaging as needed.

By the end of Week 3, Img Crafter will be fully built, secure, and documented, with a clear path to production approval in Adobe Express. Our marketing push will ensure a ready audience eager to use and try out Img Crafter in Adobe Express.

Built With

• adobe
• gemini
• open-ai