Quiz: Arte ou I.A.?

Como a tecnologia perpetua racismo e outros preconceitos?

Visualizar demo

💻 Sobre o projeto

Website informativo simples com responsividade com quiz que mistura imagens geradas por inteligência artificial e artes criadas por humanos.

O objetivo é conscientizar o usuário sobre como os resultados de sistemas de inteligência artificial são gerados e incentivá-lo a refletir sobre seu consumo e quais vieses estão presentes.

Projeto criado para a disciplina de SMC (ACH0152 - Sociedade, Meio Ambiente e Cidadania) da Universidade de São Paulo

Feature	Demonstração
Quiz com questões do JSON de forma aleatória ou específica e resultado final
Armazenamento de resultados em planilha do Google

Criado com

• 
• 
• 
• 
• 

🚀 Começando

Como rodar o projeto localmente?

Pré-requisitos

Para rodar o projeto, você vai precisar de:

• NPM
• Git

Instalação

1. Clone o repositório

   git clone https://github.com/Anemaygi/Quiz-ArteOuIA.git

2. Instale os pacotez NPM

   npm install

3. Rode o projeto

   npm run dev

OPCIONAL: Conectar com a planilha Google

1. Crie uma planilha em https://www.google.com/sheets/about/
2. Compartilhe com as configurações "Qualquer pessoa" e "Editar"
3. Logue em https://sheet.best/admin e crie uma nova conexão (colocando o link da planilha do google em Connection/Origin URL)
4. Vá em "Details" e copie o Connection URL
5. Renomeie o arquivo .env.example para .env e adicione a Connection URL em VITE_STORE_DATA

   VITE_STORE_DATA = {Connection URL sem aspas}

✏️ Usos e outras especificações

Adicionar novas perguntas no Quiz

Adicione as perguntas no arquivo src/data/quiz.json no seguinte formato:

"questions": [

  "[... outras perguntas ...]"

  {
    "obra": "<Nome da obra caso seja humano. Caso seja gerado por IA, vazio ("")>",
    "artista": "<Caso seja humano, nome da artista. Caso seja gerado por IA, IA geradora>",
    "descricao": "<Caso seja humano, descrição da obra. Caso seja gerado por IA, pequeno texto sobre o viés da imagem",
    "prompt": "<Caso seja humano, deixe vazio (""). Caso seja gerado por IA, qual prompt foi utilizado>"
    "img": "<Link externo com imagem>",
    "resposta": "<humano ou ia>"
  }

Apresentação das perguntas

No arquivo src/pages/quiz.tsx, definir:

• A quantidade de perguntas que será apresentada pelo usuário (variável total, que aceita qualquer inteiro)
• De que forma as perguntas serão apresentadas pelo usuário (variável type), nas seguintes opções:
  • "normal": Apresenta as primeiras imagens na ordem do JSON
  • "random": Embaralha as imagens que serão apresentadas
  • "specific": Defina uma lista de indexes na variável specificOrder (dentro da função typeQuiz)