Deepseek ArtifactsDeepseek Artifacts

照片排名系统

4.0
en
技术
照片排名
用户选择
元数据

Prompt

a photo ranking system using pairwise choices, where user chooses from 2 side ny side images, photos have associasted metadata and multiple users

Generated Result

import React, { useState, useEffect } from 'react';

const App = () => {
  const [photos, setPhotos] = useState([]);
  const [currentPair, setCurrentPair] = useState([]);
  const [ranking, setRanking] = useState({});

  useEffect(() => {
    fetchPhotos();
  }, []);

  const fetchPhotos = () => {
    // Mock data for photos with metadata
    const mockPhotos = [
      { id: 1, url: 'https://placehold.co/300X300', metadata: { title: 'Photo 1', description: 'Description for Photo 1' } },
      { id: 2, url: 'https://placehold.co/300X300', metadata: { title: 'Photo 2', description: 'Description for Photo 2' } },
      { id: 3, url: 'https://placehold.co/300X300', metadata: { title: 'Photo 3', description: 'Description for Photo 3' } }
    ];
    setPhotos(mockPhotos);
    setCurrentPair([mockPhotos[0], mockPhotos[1]]);
  };

  const handleChoice = (chosenId) => {
    const newRanking = { ...ranking };
    const [photoA, photoB] = currentPair;

    if (!newRanking[photoA.id]) newRanking[photoA.id] = 0;
    if (!newRanking[photoB.id]) newRanking[photoB.id] = 0;

    if (chosenId === photoA.id) {
      newRanking[photoA.id] += 1;
    } else {
      newRanking[photoB.id] += 1;
    }

    setRanking(newRanking);
    selectNextPair();
  };

  const selectNextPair = () => {
    const nextPair = photos.slice(2, 4);
    if (nextPair.length === 2) {
      setCurrentPair(nextPair);
    } else {
      // End of ranking or shuffle for more rounds
      setCurrentPair([photos[0], photos[1]]);
    }
  };

  return (
    <div className='flex flex-col items-center justify-center min-h-screen bg-gray-100'>
      <h1 className='text-3xl font-bold mb-8'>Photo Ranking System</h1>
      <div className='flex space-x-8'>
        {currentPair.map((photo) => (
          <div key={photo.id} className='flex flex-col items-center'>
            <img src={photo.url} alt={photo.metadata.title} className='w-64 h-64 object-cover rounded-lg shadow-lg' />
            <h2 className='text-xl mt-4'>{photo.metadata.title}</h2>
            <p className='text-gray-600'>{photo.metadata.description}</p>
            <button
              onClick={() => handleChoice(photo.id)}
              className='mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200'
            >
              Choose
            </button>
          </div>
        ))}
      </div>
      <div className='mt-8'>
        <h2 className='text-2xl font-bold mb-4'>Ranking</h2>
        <ul>
          {Object.entries(ranking).map(([id, score]) => (
            <li key={id} className='text-lg'>{`Photo ${id}: ${score} votes`}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default App;

More Recommendations

View All

Build ChatGPT-Like Web Interface

4.0
Software Development
en
AI Integration
Full-Stack Development
ChatGPT
UI Design
Backend Orchestration
You are a professional full-stack developer AI with deep experience in building AI-integrated UIs, backend orchestration, and vector memory systems. I want you to build a **web-based ChatGPT-like int...

Flutter 产品列表页

4.0
编程开发
en
Flutter
Dart
产品列表
class ProductListPage extends StatefulWidget { final bool useArabic; const ProductListPage({super.key, this.useArabic = false}); @override State<ProductListPage> createState() => _ProductLis...

Flutter产品列表页

4.0
编程开发
en
Flutter
产品列表
Widget
class ProductListPage extends StatefulWidget { final bool useArabic; const ProductListPage({super.key, this.useArabic = false}); @override State<ProductListPage> createState() => _ProductLis...

Build XO App with AI

4.0
Programming
en
Tic Tac Toe
AI Game
JavaScript
create a complete XO (Tic Tac Toe) app with AI opponent: "Build a modern, fully-featured Tic Tac Toe (XO) app that includes: A clean, user-friendly interface optimized for mobile, tablet, and web. ...

Generate YouTube Subscribers

4.0
Technology
en
YouTube
Subscribers
App
Make an app let generate YouTube subscribers and and comments by enter your username after that the says how many subscribers and like do you want so you type the amount of likes and subscribers , so ...

YouTube Subscribers App

4.0
Technology
en
YouTube
Subscribers
App
Make an app let generate YouTube subscribers and and comments by enter your username after that the says how many subscribers and like do you want so you type the amount of likes and subscribers , so ...