1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0?dev";
3import { ImageUpload, processFiles } from "./ImageUpload.tsx";
4
5interface ChatInputProps {
8 handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
9 running: boolean;
10 images: (string | null)[];
11 setImages: React.Dispatch<React.SetStateAction<(string | null)[]>>;
12 isDragging: boolean;
13}
18 handleSubmit,
19 running,
20 images,
21 setImages,
22 isDragging,
23}: ChatInputProps) {
43 const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
44 e.preventDefault();
45 const validImages = images.filter((img): img is string => typeof img === "string");
46 console.log("Submitting with images:", validImages);
47 if (input.trim() || validImages.length > 0) {
48 handleSubmit(e);
49 setImages([]);
50 }
51 };
52
53 const handleProcessFiles = (files: File[]) => {
54 processFiles(files, images, setImages);
55 };
56
61 disabled={running}
62 >
63 {images.length > 0 && (
64 <ImageUpload
65 images={images}
66 setImages={setImages}
67 processFiles={handleProcessFiles}
68 />
82 if (e.key === "Enter" && !e.shiftKey && !isMobile) {
83 e.preventDefault();
84 if (input.trim() || images.filter(Boolean).length > 0) {
85 handleFormSubmit(e as any);
86 }
103 }
104 }}
105 accept="image/*"
106 multiple
107 className="hidden"
139 </div>
140
141 {/* Attach images button below textarea */}
142 {!running && (
143 <div className="flex justify-start mt-1 mb-2">
150 }
151 }}
152 title="Attach images"
153 >
154 <span>📎</span> Attach images
155 </button>
156 </div>
162 <div className="bg-white p-6 rounded-lg shadow-lg text-center">
163 <div className="text-2xl mb-2">📁</div>
164 <div className="text-xl font-semibold">Drop images here</div>
165 </div>
166 </div>
10 "iconUrl": "https://i.imgur.com/5XiH5Vc.png",
11 "homeUrl": "https://onchaindom--535ea6d554af475984db1d00d89e4fe7.web.val.run",
12 "splashImageUrl": "https://i.imgur.com/5XiH5Vc.png",
13 "splashBackgroundColor": "#16121D",
14 "webhookUrl": "https://onchaindom--535ea6d554af475984db1d00d89e4fe7.web.val.run/webhook"
3export const name = "Higher Gallery";
4export const iconUrl = "https://i.imgur.com/5XiH5Vc.png";
5export const ogImageUrl = "https://i.imgur.com/5XiH5Vc.png";
6
7export function embedMetadata(baseUrl: string, path: string = "/") {
8 return {
9 version: "next",
10 imageUrl: ogImageUrl,
11 button: {
12 title: name,
15 name: name,
16 url: baseUrl + path,
17 splashImageUrl: ogImageUrl,
18 splashBackgroundColor: "#16121D"
19 }
42 "iconUrl": iconUrl,
43 "homeUrl": baseUrl,
44 "splashImageUrl": ogImageUrl,
45 "splashBackgroundColor": "#16121D",
46 "webhookUrl": baseUrl + "/webhook",
57 <div className="p-1 max-w-3xl mx-auto">
58 <div className="flex flex-col items-center my-20">
59 <Header image={channel?.image_url} />
60 <div className="text-4xl lg:text-4xl font-inter-tight font-extralight text-center mt-4 tracking-tight uppercase">/HIGHER GALLERY</div>
61 </div>
100 return (
101 <div className="p-1 max-w-3xl mx-auto">
102 <Header image={user?.pfp_url} name={user?.username} onShare={context ? onShare : undefined} />
103 <Feed casts={casts} />
104 </div>
3import { Button, ShareButton } from "./ui.tsx";
4
5export function Header({ image }) {
6 return (
7 <div className="relative w-full">
8 <div className="flex flex-col gap-4 items-center">
9 <img class="rounded-full w-20 h-20 object-cover" src={image} />
10 </div>
11 </div>
23export function Cast({ cast }) {
24 const [isFullscreen, setIsFullscreen] = useState(false);
25 const images = cast?.embeds?.filter((embed) => !!embed?.metadata?.image);
26 if (!images || !images.length) return null;
27
28 return (
29 <div className="w-full">
30 {images?.slice(0, 1)?.map((image) => (
31 <img
32 key={image.cid}
33 src={image?.url}
34 onClick={() => setIsFullscreen(!isFullscreen)}
35 className={`cursor-pointer transition-all duration-300 ease-in-out ${
2import { serveFile } from "https://esm.town/v/std/utils@64-main/index.ts";
3import { Hono } from "npm:hono";
4import { embedMetadata, handleFarcasterEndpoints, iconUrl, name, ogImageUrl } from "./farcaster.ts";
5
6const app = new Hono();
41 <meta property="og:title" content="${name}" />
42 <meta property="og:description" content="A gallery of Higher channel posts" />
43 <meta property="og:image" content="${ogImageUrl}" />
44
45 <!-- Twitter -->
46 <meta property="twitter:card" content="summary_large_image" />
47 <meta property="twitter:url" content="${baseUrl}${path}" />
48 <meta property="twitter:title" content="${name}" />
49 <meta property="twitter:description" content="A gallery of Higher channel posts" />
50 <meta property="twitter:image" content="${ogImageUrl}" />
51
52 <link rel="preconnect" href="https://fonts.googleapis.com" />
4 description: "A conversational AI assistant with natural language understanding capabilities",
5 date: "2025-03-28",
6 image: "https://images.unsplash.com/photo-1677442135968-6054f3be6c9d?q=80&w=800&auto=format&fit=crop"
7 },
8 {
9 name: "Image Classification API",
10 description: "API for classifying images using deep learning techniques",
11 date: "2025-02-15",
12 image: "https://images.unsplash.com/photo-1633412802994-5c058f151b66?q=80&w=800&auto=format&fit=crop"
13 },
14 {
16 description: "Machine learning based recommendation system for personalized content",
17 date: "2025-01-10",
18 image: "https://images.unsplash.com/photo-1563461661347-507df61e1aab?q=80&w=800&auto=format&fit=crop"
19 },
20 {
22 description: "Tool for converting speech to text with high accuracy",
23 date: "2024-12-05",
24 image: "https://images.unsplash.com/photo-1589254065878-42c9da997008?q=80&w=800&auto=format&fit=crop"
25 }
26];
121 }
122
123 .project-image {
124 width: 100%;
125 height: 300px;
127 }
128
129 .project-image img {
130 width: 100%;
131 height: 100%;
134 }
135
136 .project:hover .project-image img {
137 transform: scale(1.05);
138 }
162 width: 14px;
163 height: 14px;
164 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z' /%3E%3C/svg%3E");
165 margin-right: 0.5rem;
166 }
263 ${sortedProjects.map(project => `
264 <div class="project">
265 <div class="project-image">
266 <img src="${project.image}" alt="${project.name}">
267 </div>
268 <div class="project-content">
257 </tr>
258 <tr>
259 <td>Images</td>
260 <td>Visual content</td>
261 <td>Illustrations</td>
82 setIsVisited(!!visitedLinks[bookmark.visuals.visitUrl]);
83
84 // Check image dimensions and set aspect ratio
85 const img = new Image();
86 img.onload = () => {
87 if (img.width > img.height * 1.2) { // If width is significantly larger than height
266 src: ICON_URL,
267 sizes: "192x192 512x512",
268 type: "image/png",
269 },
270 ],
12 "visuals": {
13 "visitUrl": "https://miniappsiiworke.doo.ee/send-Eod-Totals/",
14 "siteiconUrl": "https://my.fnbank.net/images/fi-assets/1st-national-bank/1st-national-bank-menu-logo-400ce79a.png",
15 "thumbnailUrl": "https://cdn.midjourney.com/49f2963d-6285-4a1f-b54f-5e0f08b68d32/0_1.png"
16 }