/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function EbayListingGenerator() { const [selectedFile, setSelectedFile] = useState(null); const [identificationResult, setIdentificationResult] = useState(null); const [listingResult, setListingResult] = useState(null); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [additionalDetails, setAdditionalDetails] = useState({ condition: 'Used', price: '', category: '', userNotes: '' // New field for user notes }); const handleFileChange = (event) => { const file = event.target.files[0]; setSelectedFile(file); setIdentificationResult(null); setListingResult(null); setError(null); }; const handleDetailChange = (e) => { const { name, value } = e.target; setAdditionalDetails(prev => ({ ...prev, [name]: value })); }; const handleGenerateListing = async () => { if (!selectedFile || !identificationResult) { setError("Please upload and identify an image first"); return; } setIsLoading(true); setError(null); const formData = new FormData(); formData.append('image', selectedFile); formData.append('description', identificationResult.description); formData.append('condition', additionalDetails.condition); formData.append('price', additionalDetails.price); formData.append('category', additionalDetails.category); formData.append('userNotes', additionalDetails.userNotes); // Add user notes to form data try { const response = await fetch('/generate-listing', { method: 'POST', body: formData }); if (!response.ok) { throw new Error('Listing generation failed'); } const result = await response.json(); setListingResult(result); } catch (err) { setError(err.message); } finally { setIsLoading(false); } }; const handleUpload = async () => { if (!selectedFile) { setError("Please select an image first"); return; } setIsLoading(true); setError(null); const formData = new FormData(); formData.append('image', selectedFile); try { const response = await fetch('/identify-image', { method: 'POST', body: formData }); if (!response.ok) { throw new Error('Image identification failed'); } const result = await response.json(); setIdentificationResult(result); } catch (err) { setError(err.message); } finally { setIsLoading(false); } }; return (

🏷️ eBay Listing Generator

{selectedFile && (

Selected: {selectedFile.name}

)} {identificationResult && (

Additional Listing Details

Condition: Price ($): Category: Additional Notes:

</label>
          </div>
          <button 
            onClick={handleGenerateListing} 
            disabled={!identificationResult || isLoading}
            className="generate-button"
          >
            {isLoading ? '🔄 Generating Listing...' : '📝 Generate eBay Listing'}
          </button>
        </div>
      )}

{error && (
        <div className="error-message">
          ❌ {error}
        </div>
      )}

{identificationResult && (
        <div className="result-container">
          <h3>Image Description:</h3>
          <pre>{identificationResult.description}</pre>
        </div>
      )}

{listingResult && (
        <div className="listing-result">
          <h3>🎉 Generated eBay Listing</h3>
          <div className="listing-title">
            <strong>Title:</strong> {listingResult.title}
          </div>
          <div className="listing-description">
            <strong>Description:</strong>
            <pre>{listingResult.description}</pre>
          </div>
        </div>
      )}
    </div>
  );
}

function App() {
  return (
    <div className="app-container">
      <EbayListingGenerator />
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  // Image identification route
  if (request.method === 'POST' && new URL(request.url).pathname === '/identify-image') {
    try {
      const { OpenAI } = await import("https://esm.town/v/std/openai");
      const openai = new OpenAI();

const formData = await request.formData();
      const imageFile = formData.get('image');

if (!(imageFile instanceof File)) {
        return new Response(JSON.stringify({ error: 'No image uploaded' }), { 
          status: 400,
          headers: { 'Content-Type': 'application/json' }
        });
      }

const arrayBuffer = await imageFile.arrayBuffer();
      const base64Image = btoa(
        new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), '')
      );

const response = await openai.chat.completions.create({
        model: "gpt-4-vision-preview",
        messages: [
          {
            role: "user",
            content: [
              { 
                type: "text", 
                text: "Describe this item in detail. Identify its key features, condition, and potential use cases." 
              },
              { 
                type: "image_url", 
                image_url: { url: `data:image/jpeg;base64,${base64Image}` }
              }
            ]
          }
        ],
        max_tokens: 300
      });

const description = response.choices[0].message.content;

return new Response(JSON.stringify({ 
        description,
        fileName: imageFile.name,
        fileSize: imageFile.size 
      }), {
        headers: { 'Content-Type': 'application/json' }
      });

} catch (error) {
      console.error('Image identification error:', error);
      return new Response(JSON.stringify({ 
        error: 'Failed to process image', 
        details: error.message 
      }), { 
        status: 500,
        headers: { 'Content-Type': 'application/json' }
      });
    }
  }

// Listing generation route
  if (request.method === 'POST' && new URL(request.url).pathname === '/generate-listing') {
    try {
      const { OpenAI } = await import("https://esm.town/v/std/openai");
      const openai = new OpenAI();

const formData = await request.formData();
      const description = formData.get('description');
      const condition = formData.get('condition');
      const price = formData.get('price');
      const category = formData.get('category');
      const userNotes = formData.get('userNotes');

const listingResponse = await openai.chat.completions.create({
        model: "gpt-4o-mini",
        messages: [
          {
            role: "system",
            content: "You are an expert eBay listing writer. Create compelling, SEO-friendly titles and descriptions that highlight product features and appeal to potential buyers."
          },
          {
            role: "user",
            content: `Create an eBay listing for an item with these details:
- Item Description: ${description}
- Condition: ${condition}
- Price: $${price}
- Category: ${category}
- Seller's Additional Notes: ${userNotes || 'No additional notes provided'}

Generate a catchy title (max 80 characters) and a detailed description that includes:
1. Key features
2. Condition details
3. Potential uses
4. Why a buyer would want this item
5. Incorporate any specific details from the seller's notes`
          }
        ],
        max_tokens: 500
      });

const listingContent = listingResponse.choices[0].message.content;
      const [title, ...descriptionParts] = listingContent.split('\n');

return new Response(JSON.stringify({ 
        title: title.trim(),
        description: descriptionParts.join('\n').trim()
      }), {
        headers: { 'Content-Type': 'application/json' }
      });

} catch (error) {
      console.error('Listing generation error:', error);
      return new Response(JSON.stringify({ 
        error: 'Failed to generate listing', 
        details: error.message 
      }), { 
        status: 500,
        headers: { 'Content-Type': 'application/json' }
      });
    }
  }

// Existing server rendering logic
  return new Response(`
    <html>
      <head>
        <title>eBay Listing Generator</title>
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { 'Content-Type': 'text/html' }
  });
}

const css = `
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

.app-container {
  max-width: 700px;
  margin: 0 auto;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.ebay-listing-generator {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.file-input {
  margin-bottom: 15px;
}

.file-preview {
  max-width: 300px;
  text-align: center;
}

.preview-image {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  margin: 10px 0;
  border-radius: 4px;
}

.upload-button, .generate-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin: 15px 0;
}

.upload-button:disabled, .generate-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.additional-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  margin-bottom: 15px;
}

.input-group label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.input-group input,
.input-group select,
.input-group textarea {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.input-group textarea {
  resize: vertical;
  min-height: 100px;
}

.error-message {
  color: red;
  margin: 10px 0;
}

.result-container, .listing-result {
  margin-top: 20px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  width: 100%;
  max-width: 600px;
  overflow-x: auto;
}

.listing-title, .listing-description {
  margin: 10px 0;
}
`;</article></body></html>

together_idimage

Version 2