Skip to content

Remove background and make scrollable area clearer #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
superhighfives wants to merge 16 commits into
base: main
Choose a base branch
from
Open

Remove background and make scrollable area clearer #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
2708fc7
fix(layout): tidy layout
superhighfives Jun 1, 2025
fc92f98
fix(styling): remove background
superhighfives Jun 1, 2025
4948df1
fix(css): add borders
superhighfives Jun 1, 2025
10e3d32
Merge branch 'shf/remove-background' into shf/add-restoration-example
superhighfives Jun 1, 2025
2bad3e2
Revert "Merge branch 'shf/remove-background' into shf/add-restoration…
superhighfives Jun 1, 2025
55378cc
fix(css): more styling updates
superhighfives Jun 1, 2025
1a94bec
Merge branch 'main' into shf/remove-background
superhighfives Jun 1, 2025
cab5c05
Merge branch 'shf/remove-background' into shf/add-restoration-example
superhighfives Jun 1, 2025
a7a9fab
Merge pull request #5 from replicate/shf/add-restoration-example
superhighfives Jun 1, 2025
47e95f0
Revert "Merge pull request #5 from replicate/shf/add-restoration-exam…
superhighfives Jun 1, 2025
99336b3
fix(css): layout changes
superhighfives Jun 1, 2025
1c70f17
fix(css): layout flex update
superhighfives Jun 1, 2025
3af5917
Merge branch 'main' into shf/remove-background
superhighfives Jun 1, 2025
2f28304
fix(css): update grid
superhighfives Jun 1, 2025
bbd2c6e
fix(css): update typography
superhighfives Jun 1, 2025
bd5e533
fix(page): styling
superhighfives Jun 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 16 additions & 15 deletions public/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,14 @@ const starterImages = [

function PoweredByBanner() {
return (
<div className="bg-orange-500 text-white text-center text-base md:text-lg py-2">
<a
href="https://replicate.com/black-forest-labs/flux-kontext-pro?utm_source=project&utm_campaign=kontext-chat"
target="_blank"
rel="noopener noreferrer"
className="underline"
className="block md:rounded-t underline bg-orange-500 text-white text-center text-base md:text-lg py-2 hover:bg-orange-600 focus:bg-orange-600 transition-colors"
>
Powered by FLUX.1 Kontext on Replicate
</a>
</div>
);
}

Expand Down Expand Up @@ -439,20 +437,20 @@ function App() {
}, [showUpload]);

return (
<div className="min-h-screen bg-gradient-to-br from-[#e04f0c] to-[#f47020] md:overflow-auto overflow-hidden">
<div className="min-h-screen md:overflow-auto overflow-hidden">
{/* Main Content */}
<div className="min-h-screen flex flex-col md:flex md:items-center h-screen md:h-auto">
{showUpload ? (
/* Upload Section */
<div className="w-full md:max-w-4xl bg-white md:shadow-md flex flex-col h-screen md:h-auto overflow-hidden md:overflow-visible">
<div className="w-full md:max-w-4xl bg-white md:shadow flex flex-col h-screen md:h-auto overflow-hidden md:overflow-visible flex-1">
{/* Logo */}
<div className="p-4 md:p-2 bg-white border-b border-gray-200">
<img src="/kontext-chat-rainbow.png" className="w-1/3 md:w-1/4 mx-auto" alt="Kontext Chat" />
</div>
<PoweredByBanner />

{/* Upload Area */}
<div className="flex-1 flex flex-col p-4 md:p-6 overflow-y-auto md:overflow-visible pb-32 md:pb-6" style={{paddingBottom: 'calc(8rem + env(safe-area-inset-bottom))'}}>
<div className="flex-1 flex flex-col p-4 md:p-6 overflow-y-auto md:overflow-visible pb-8 border-x" style={{paddingBottom: 'calc(2rem + env(safe-area-inset-bottom))'}}>
{/* Intro Text */}
<div className="text-center mb-6">
<p className="text-gray-700 text-base md:text-lg">
Expand Down Expand Up @@ -490,16 +488,19 @@ function App() {
{starterImages.map((starter, idx) => (
<button
key={idx}
className="aspect-square w-full rounded-xl overflow-hidden border-2 border-gray-200 hover:border-orange-400 focus:border-orange-500 transition-all shadow-sm bg-gray-50 group"
className="flex flex-col items-stretch w-full rounded-xl border border-gray-200 hover:border-orange-400 focus:border-orange-500 transition-all shadow-sm bg-gray-50 group"
onClick={() => handleStarterImageClick(starter)}
disabled={loading}
title={starter.suggestedPrompt}
>
<img
src={starter.imageUrl}
alt={starter.suggestedPrompt}
className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-200"
/>
<div className="aspect-square overflow-hidden rounded-t-lg relative">
<img
src={starter.imageUrl}
alt={starter.suggestedPrompt}
className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-200"
/>
</div>
<p className="flex-1 text-left p-2 text-xs leading-4 border-t line-clamp-2 overflow-hidden text-ellipsis relative before:absolute before:inset-x-0 before:bottom-0 before:h-2 before:bg-gradient-to-t before:from-gray-50 before:via-gray-50 before:to-transparent before:rounded-b-xl before:mx-[2px]"><span className="font-serif text-gray-400 pr-px">"</span>{starter.suggestedPrompt}<span className="font-serif text-gray-400 pl-px">"</span></p>
</button>
))}
</div>
Expand All @@ -514,7 +515,7 @@ function App() {
</div>
) : (
/* Chat Section */
<div className="w-full md:max-w-4xl bg-white md:shadow-md overflow-hidden flex flex-col h-screen md:h-screen relative">
<div className="w-full md:max-w-4xl bg-white md:shadow-md overflow-hidden flex flex-col h-screen relative">
{/* Chat Header with Logo */}
<div className="p-4 md:p-2 bg-white border-b border-gray-200 relative flex items-center flex-shrink-0">
<button
Expand All @@ -537,7 +538,7 @@ function App() {
<PoweredByBanner />

{/* Chat Messages */}
<div className="flex-1 overflow-y-auto p-6 space-y-4 pb-56 md:pb-6" ref={chatContainerRef}>
<div className="flex-1 overflow-y-auto p-6 space-y-4 pb-48 md:pb-6 border-x" ref={chatContainerRef}>
{messages.map((msg) => (
<div
key={msg.id}
Expand Down Expand Up @@ -587,7 +588,7 @@ function App() {
</div>

{/* Input Area */}
<div className="fixed bottom-0 left-0 right-0 bg-white border-t p-4 md:relative md:border-t" style={{paddingBottom: 'calc(1rem + env(safe-area-inset-bottom))'}}>
<div className="fixed bottom-0 left-0 right-0 bg-white border-t p-4 md:relative md:border-t md:border-x" style={{paddingBottom: 'calc(1rem + env(safe-area-inset-bottom))'}}>
<form onSubmit={handleSend} className="flex items-end gap-3 max-w-4xl mx-auto">
<div className="flex-1 relative">
<div className="bg-gray-50 rounded-3xl px-4 py-3 pr-12 border-2 border-transparent focus-within:border-orange-500 transition-colors">
Expand Down
3 changes: 1 addition & 2 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#e04f0c" />
<!-- React and ReactDOM from CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
Expand Down Expand Up @@ -33,7 +32,7 @@

<!-- Meta Tags Generated with https://metatags.io -->
</head>
<body class="bg-gradient-to-br from-[#e04f0c] to-[#f47020] min-h-screen flex items-center justify-center">
<body class="min-h-screen flex items-center justify-center">
<div id="root"></div>
<script src="app.js" type="text/babel"></script>
<script type="text/babel">
Expand Down