Val Town Code SearchReturn to Val Town

55}
56
57export function generateImagePrompt(options: StoryOptions, characterName: string, title: string): string {
58  const { character, color, activity, style } = options;
59  

13  style: string;
14  styleEmoji: string;
15  imageUrl: string;
16  createdAt: string;
17}

54          <div class="md:flex">
55            <div class="md:w-2/5">
56              <div class="h-64 md:h-full bg-cover bg-center" id="project-image-container" style="background-image: url('https://maxm-imggenurl.web.val.run/loading-placeholder')"></div>
57            </div>
58            <div class="md:w-3/5 p-8">
145        </div>
146        
147        <!-- Results and Images -->
148        <div class="mb-10">
149          <h2 class="text-2xl font-bold mb-4">Results</h2>
162            </ul>
163            
164            <h3 class="text-xl font-semibold mb-4">Project Images</h3>
165            <div id="project-images" class="grid grid-cols-1 md:grid-cols-3 gap-4">
166              <!-- Images will be loaded here -->
167              <div class="animate-pulse">
168                <div class="bg-gray-200 h-48 rounded"></div>
293        document.getElementById('project-summary').textContent = project.summary;
294        
295        // Update image
296        const imageUrl = project.image || `https://maxm-imggenurl.web.val.run/sea-ice-research-${project.id}`;
297        document.getElementById('project-image-container').style.backgroundImage = `url('${imageUrl}')`;
298        
299        // Update project details
375        }
376        
377        // Update project images
378        const imagesContainer = document.getElementById('project-images');
379        imagesContainer.innerHTML = '';
380        
381        if (project.images && project.images.length > 0) {
382          project.images.forEach(image => {
383            const imageEl = document.createElement('div');
384            imageEl.className = 'relative group';
385            imageEl.innerHTML = `
386              <img src="${image.url}" alt="${image.caption}" class="w-full h-48 object-cover rounded shadow">
387              <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex items-end transition-all duration-300">
388                <div class="p-4 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
389                  <p class="text-sm">${image.caption}</p>
390                </div>
391              </div>
392            `;
393            imagesContainer.appendChild(imageEl);
394          });
395        } else {
396          imagesContainer.innerHTML = '<p class="text-gray-500 col-span-3">No project images available</p>';
397        }
398        
519          projectEl.className = 'bg-white rounded-lg shadow overflow-hidden transition-transform hover:scale-105';
520          
521          // Use placeholder image if project image is not available
522          const imageUrl = project.image || `https://maxm-imggenurl.web.val.run/sea-ice-research-${project.id}`;
523          
524          projectEl.innerHTML = `
525            <a href="/research/${project.id}" class="block">
526              <div class="h-40 bg-cover bg-center" style="background-image: url('${imageUrl}')"></div>
527              <div class="p-4">
528                <h3 class="font-semibold mb-2">${project.title}</h3>

54          <div class="md:flex">
55            <div class="md:w-1/3">
56              <div class="h-64 md:h-full bg-cover bg-center" id="member-image-container" style="background-image: url('https://maxm-imggenurl.web.val.run/loading-placeholder')"></div>
57            </div>
58            <div class="md:w-2/3 p-8">
293        document.getElementById('member-bio').textContent = member.bio;
294        
295        // Update image
296        const imageUrl = member.image || `https://maxm-imggenurl.web.val.run/portrait-of-scientist-${member.id}`;
297        document.getElementById('member-image-container').style.backgroundImage = `url('${imageUrl}')`;
298        
299        // Update contact information

58              <div className="relative h-48 overflow-hidden">
59                <img 
60                  src={story.imageUrl} 
61                  alt={`Illustration for ${story.title}`}
62                  className="w-full h-full object-cover"

64            <!-- Tags will be loaded here -->
65          </div>
66          <div id="post-image-container" class="rounded-lg overflow-hidden mb-8">
67            <img id="post-image" src="https://maxm-imggenurl.web.val.run/loading-placeholder" alt="Blog post image" class="w-full h-auto">
68          </div>
69        </header>
82          <div class="flex flex-col sm:flex-row items-center sm:items-start">
83            <div class="w-24 h-24 rounded-full overflow-hidden mb-4 sm:mb-0 sm:mr-6 flex-shrink-0">
84              <img id="author-image" src="https://maxm-imggenurl.web.val.run/loading-placeholder" alt="Author" class="w-full h-full object-cover">
85            </div>
86            <div>
228        });
229        
230        // Update image
231        document.getElementById('post-image').src = post.image;
232        document.getElementById('post-image').alt = post.title;
233        
234        // Update content
281        document.getElementById('author-bio-text').textContent = author.bio;
282        
283        // Use placeholder image if author image is not available
284        const imageUrl = author.image || `https://maxm-imggenurl.web.val.run/portrait-of-scientist-${author.id}`;
285        document.getElementById('author-image').src = imageUrl;
286        document.getElementById('author-image').alt = author.name;
287        
288        // Update profile link
326          postEl.innerHTML = `
327            <a href="/blog/${post.id}" class="block">
328              <img src="${post.image}" alt="${post.title}" class="w-full h-40 object-cover">
329              <div class="p-4">
330                <h3 class="font-semibold mb-1">${post.title}</h3>

136          <div className="rounded-lg overflow-hidden shadow-lg">
137            <img 
138              src={story.imageUrl} 
139              alt={`Illustration for ${story.title}`}
140              className="w-full h-auto"

12      font-family: 'Comic Neue', cursive;
13      background-color: #f0f9ff;
14      background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
15    }
16    

1import { Hono } from "https://esm.sh/hono@3.11.7";
2import { saveStory, getAllStories, getStoryById, deleteStory } from "../database/queries.ts";
3import { generateStory, generateImagePrompt } from "../services/storyGenerator.ts";
4import { StoryOptions, Story } from "../../shared/types.ts";
5
14    const { title, content, animalName } = await generateStory(options);
15    
16    // Generate image prompt
17    const imagePrompt = generateImagePrompt(options, animalName, title);
18    
19    // Create image URL using Val Town's AI image generation
20    const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(imagePrompt)}`;
21    
22    // Create the story object
32      style: options.style,
33      styleEmoji: options.styleEmoji,
34      imageUrl,
35      createdAt: new Date().toISOString()
36    };

55}
56
57export function generateImagePrompt(options: StoryOptions, animalName: string, title: string): string {
58  const { animal, color, activity, style } = options;
59