search

ff6347 / named-css-colors-search-react

https://colornames.inpyjamas.dev/
MIT License
1 stars 0 forks source link

Could render placeholder images with provided size #5

Closed ff6347 closed 1 month ago

ff6347 commented 1 month ago

Like placekitten.com/300/200

What is needed for this?

ff6347 commented 1 month ago

I asked an AI

Fabian Morón Zirfas: Do you know the service placekitten?

Raycast AI: Placekitten is a web service that provides placeholder images of kittens for use in web design and development. It allows users to quickly insert kitten photos of specified dimensions into their designs or code as temporary placeholders. ^1

Fabian Morón Zirfas: Yes. That is it. What would I need to do to have an api that returns images with the provided size like placekitten does in the correct provided color? So the api would be

predefiend width and height /<CSS COLOR NAME>/ 
quadrat /<CSS COLOR NAME>/<WIDTH>
rectangle /<CSS COLOR NAME>/<WIDTH>/<HEIGHT>

Raycast AI: To create an API that returns images with the provided size and color, similar to placekitten but with color options, you'd need to set up a Node.js server with Express and use a library like Sharp for image manipulation. Here's a basic implementation:

import express from 'express';
import sharp from 'sharp';

const app = express();
const port = 3000;

// Helper function to validate color
const isValidColor = (color) => {
  const s = new Option().style;
  s.color = color;
  return s.color !== '';
};

app.get('/:color/:width/:height?', async (req, res) => {
  const { color, width, height } = req.params;
  const size = parseInt(width);

  if (!isValidColor(color)) {
    return res.status(400).send('Invalid color');
  }

  if (isNaN(size) || size <= 0 || size > 2000) {
    return res.status(400).send('Invalid size');
  }

  const imageHeight = height ? parseInt(height) : size;

  try {
    const image = await sharp({
      create: {
        width: size,
        height: imageHeight,
        channels: 4,
        background: { r: 0, g: 0, b: 0, alpha: 0 }
      }
    })
    .flatten({ background: color })
    .png()
    .toBuffer();

    res.contentType('image/png');
    res.send(image);
  } catch (error) {
    res.status(500).send('Error generating image');
  }
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

This implementation handles all three cases you mentioned. To use it, install the required packages (express and sharp) and run the server. Then you can access images like:

The code includes basic error handling and size limitations for safety.

Fabian Morón Zirfas: Could I also run this in an edge function like in astro on netlify?

Raycast AI: Yes, you can adapt this concept to run in an edge function, like those supported by Astro on Netlify. However, there are some considerations:

  1. Edge functions have limitations on package sizes and execution time.
  2. Image processing libraries like Sharp might not be suitable for edge environments.

Here's a simplified version that could work in an Astro edge function on Netlify:

export async function get({ params }) {
  const { color, width, height } = params;
  const size = parseInt(width);
  const imageHeight = height ? parseInt(height) : size;

  if (!isValidColor(color) || isNaN(size) || size <= 0 || size > 2000) {
    return new Response('Invalid parameters', { status: 400 });
  }

  const svg = `
    <svg width="${size}" height="${imageHeight}" xmlns="http://www.w3.org/2000/svg">
      <rect width="100%" height="100%" fill="${color}"/>
    </svg>
  `;

  return new Response(svg, {
    headers: {
      'Content-Type': 'image/svg+xml',
      'Cache-Control': 'public, max-age=31536000',
    },
  });
}

function isValidColor(color) {
  const s = new Option().style;
  s.color = color;
  return s.color !== '';
}

This version uses SVG instead of PNG, which is lighter and doesn't require image processing libraries. Place this in a .js file in your Astro project's src/pages/api/ directory, following Netlify's edge function naming conventions.

Note: Actual implementation details may vary based on your specific Astro and Netlify setup.

ff6347 commented 1 month ago

Works:

Path is "/:width?/:height?/:color?" returns SVG

Examples: