Update Add Model Layout and Styling

[ppatel9703]

Problem (Why)

Problems reported by Maher and others (some are design and some are dev issues)

1. cards ellipse too soon cutting off the titles and making it hard to know which model option is available
2. current sections of Locally hosted vs commercially hosted doesn't mean much to users so consider removing alltogether
3. images displaying on cards are sometimes inaccurate/misaligned - this is a DEV task should be ticketed separately
4. Update the page description from the ai generated one to make it more helpful to our users; include a statement encouraging users to email our generic inbox in order to request additional model types be added
5. take another look at styling to see what we can enhance
6. cards should be in alphabetical order within sections - this is a DEV task should be ticketed separately

Impact (Who)

Our builders of apps - developers.

Existing

Current page in GovConnect.AI: https://workshop.cfg.deloitte.com/cfg-ai-demo/SemossWeb/packages/client/dist/#/import?type=model

Natalie worked on this some last week addressing a lot of the main pain points. Please reference Figma for Add Model/Model connection form Figma link

Requirements (What)

What are more specific requirements that needs to take to consider this issue resolved.

• Update cards so that they accommodate more characters for the title
• Remove the locally hosted and commercially hosted sections - will need to figure out how to categorize locally hosted models
• Remove the elevation on the cards
• Update the hover state for the card
• Update the description of the page

[MohammadmansoorUX]

Based on the requirements I have designed Model cards, Tabs and I made few changes on the layout. Updated figma available in "Mansoor_Design_Suggestions" section.

https://www.figma.com/design/E7x1Cpz6YZSCDHCJ6E3HQ6/Add-Model-Flow?node-id=0-1&t=U90hvlQz1Q1PTEWi-1

[MohammadmansoorUX]

Based on the Natalie's comments. I have made changes to the figma

1.Increased the card width to fill the "Open AI" container.
2.Used the typography and components from design library.
3.Vertical gap between Icons and Text as 8PX.
4.Reduced the contrast for email in Tab version page.

Section Name - Mansoor_Design_Suggestions

https://www.figma.com/design/E7x1Cpz6YZSCDHCJ6E3HQ6/Add-Model-Flow?node-id=0-1&t=cyOAfb1oKanLbxXS-1

[MohammadmansoorUX]

Based on the Natalie's comments. I have made changes to the figma.

1. Add "Coming Soon" card.
2. Remove the Banner gradient.
3. Card variation (If the model title doesn’t fit within the space, it is displayed with "..." and a tooltip showing
   the full title appears on hover.)

Section Name - Mansoor_Design_Suggestions

https://www.figma.com/design/E7x1Cpz6YZSCDHCJ6E3HQ6/Add-Model-Flow?node-id=0-1&t=k82mZhCXlAJbZ5sT-1

[MohammadmansoorUX]

Hi @ppatel9703 Now figma is ready for dev. Please find the updated figma link in section "Finalized Design".

Figma Link:

https://www.figma.com/design/E7x1Cpz6YZSCDHCJ6E3HQ6/Add-Model-Flow?node-id=0-1&t=sXgpJ5prIZtiD7hm-1

[natdink]

@ppatel9703 moved this to To do and updated title. Again, figuring it makes sense to keep paper trail and will be helpful for FE dev.

[neelneelneel]

@ryanweiler92 @ppatel9703 - should we split model by type (ie: text, image, etc?) instead of hosting type?. If we do, do we need a different field to identify subtype?

[GSrini92]

Completed Tasks:

• Updated the layout styling for the cards as per the finalized Figma design.
• Removed card elevation and gradient.
• Updated the hover style for cards based on the design specs.
• Removed the "Commercially Hosted" sections and implemented a unified tab-based structure to display all models together, as per the new layout.

Pending Tasks:

• Implement tooltip on card titles to show the full model's name on hover, to handle text truncation.
• Add a "Coming Soon" card to visually indicate disabled model options.