Logo
Product & Platform Engineering
Product & Platform Engineering
Product Thinking | Workflows
Explore More
Data & AI
Data & AI
Data Engineering | ML | Analytics | Visualization
Explore More
Digital Engineering
Digital Engineering
Responsive Front End | Backend | Microservices
Explore More
Mobility
Mobility
Native | Cross Platform | Internet of Things
Explore More

Featured Insights

How BigThinkCode transforms Demand Planning for Supply Chain management?
How BigThinkCode transforms Demand Planning for Supply Chain management?
View More
AI-Driven Logistics: Redefining Supply Chain Operations
AI-Driven Logistics: Redefining Supply Chain Operations
View More
Real-Time Personalization with Streaming Data: How E-Commerce Uses API Logs to Boost Sales
Real-Time Personalization with Streaming Data: How E-Commerce Uses API Logs to Boost Sales
View More
AgriTech Innovations
E-commerce & Retails
Healthcare
Industrial Automation 4.0
Banking
Education
Transportation & logistics
Insurance
Life Sciences
Travel & hospitality
Investment Banking
Telecom
Public Sector
Financial Institutions
Supply Chain Management (SCM)
Business Intelligence Systems (BIS)
Open source & community driven
Marketing & Sales
CompanyInsightsContactJoin us
  • What we doSub Menu
    • Product & Platform Engineering
    • Data & AI
    • Digital Engineering
    • Mobility
  • Who we work withSub Menu
    • AgriTech Innovations
    • E-commerce & Retails
    • Healthcare
    • Industrial Automation 4.0
    • Banking
    • Education
    • Transportation & logistics
    • Insurance
    • Life Sciences
    • Travel & hospitality
    • Investment Banking
    • Telecom
    • Public Sector
    • Financial Institutions
    • Supply Chain Management (SCM)
    • Business Intelligence Systems (BIS)
    • Open source & community driven
    • Marketing & Sales
  • Company
  • Insights
  • Contact
  • Join us

MS Pic2Card

Auto generates Adaptive card UI from Image.

MS Pic2Card

Overview

Pic2Card is developed to solve a challenging problem of generating usable UI template from Image. This conversion process involves identifying different elements, collecting the elements’ attributes and details about the layout. It detects and extract the element details from the Image by using both neural network logic and rule-based systems. To plot the card-based UI, the output is created in the form of JSON that adhere to Adaptive Card’s schema. Our object detection model performs with a mAP score of 60%, and overall code generation quality is measured with a BLEU score of 90%.

Challenge

Card-based UI is becoming a preferred format for most front-end applications. But a product owner must wait till a UI developer develops an initial version of the screens to get a feel of the app. And this wait-time directly impacts the release cycle since it takes some effort to accommodate each correction/feedback from the Product owner. Pic2Card OSS to solve the challenging problem of generating a usable UI template from Image. The other challenge we faced during implementation is with the data, not having adequate data, data with all permutations, and normalized data set for our ML model to learn

Solution

We used a combination of computer vision, deep learning, and heuristic models to understand the objects and formatting ​This conversion process involves identifying different elements and collecting the elements’ attributes and details about the layout. It detects and extracts the element details from the Image by using both neural network logic and rule-based systems. To plot the card-based UI, the output is created in the form of JSON that adhere to Adaptive Card’s schema. When we understood Data is the real bottleneck to solving the problem, we produced synthetic Data to avoid bias, and achieve a large dataset for training.​

Outcome

We achieved creating adaptive cards by plotting the card-based UI, the output is created in the form of JSON that adhere to Adaptive Card’s schema. Pic2card pipeline implementation is available atRepoRepo

Impact

60%
Our object detection model performs with a mAP score of 60%
90%
Overall code generation quality is measured with a BLEU score of 90%

Talk to us for more insights

What more? Your business success story is right next here. We're just a ping away. Let's get connected.

Contact Us

Quick Links

  • Featured Insights
  • Contact us

Domains

  • Financial Institutions & Insurance
  • Healthcare
  • E-commerce & Retails
  • Open source & Community driven
  • Industrial Automation 4.0
  • AgriTech Innovations
  • Public Sector
  • Education
  • Banking
  • Life Sciences
  • Transportation and logistics
  • Travel and hospitality

Services

  • Product & Platform Engineering
  • Data & Artificial Intelligence
  • Digital Engineering
  • Mobility

Company

  • About us
  • Careers
  • Privacy Policy
  • Information Security Policy
  • Reach Us

Reach Us

India
Chennai, TamilNadu
United States
Wilmington, DE
Email
info@bigthinkcode.com
Copyright © 2025 BigThinkCode Technologies.