Upload 49 files

Dockerfile

@@ -0,0 +1,27 @@
+# Use the official Python 3.10.12 image
+FROM python:3.10.12
+
+# Set the working directory to /code
+WORKDIR /code
+
+# Copy the current directory contents into the container at /code
+COPY ./requirements.txt /code/requirements.txt
+
+# Install requirements.txt 
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+# Switch to the "user" user
+USER user
+# Set home to the user's home directory
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+# Set the working directory to the user's home directory
+WORKDIR $HOME/app
+
+# Copy the current directory contents into the container at $HOME/app setting the owner to the user
+COPY --chown=user . $HOME/app
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,11 +1,6 @@
----
-title: Interpretador De Texto Ii
-emoji: 🔥
-colorFrom: red
-colorTo: gray
+title: Interpretador de Texto
+emoji: 🐢
+colorFrom: purple
+colorTo: blue
 sdk: docker
 pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,35 @@
+from fastapi import FastAPI
+from fastapi.requests import Request
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from models.Interpretador import Interpretador
+from requestsBaseModels.InterpretadorRequestBaseModel import InterpretadorRequestBaseModel
+from responsesBaseModels.InterpretadorResponseBaseModel import InterpretadorResponseBaseModel
+
+
+app = FastAPI()
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
+
+@app.get('/', response_class=HTMLResponse)
+async def main(request: Request):
+    context = {"request": request}
+    response = templates.TemplateResponse("index.html", context)
+    return response
+
+
+@app.post('/', response_model=InterpretadorResponseBaseModel)
+async def responder(request: InterpretadorRequestBaseModel):
+    texto = request.texto
+    pergunta = request.pergunta
+    interpretador = Interpretador(texto, pergunta)
+    resposta = interpretador.resposta
+    response = InterpretadorResponseBaseModel(resposta=resposta)    
+    return response
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

models/.gitignore

@@ -0,0 +1 @@
+__pycache__

models/Interpretador.py

@@ -0,0 +1,21 @@
+from transformers import pipeline
+from transformers.pipelines.base import Pipeline
+
+
+class Interpretador:
+
+    def __init__(self, texto: str, pergunta: str) -> None:
+        self._texto = texto
+        self._pergunta = pergunta
+        self._responder()
+
+
+    @property
+    def resposta(self) -> str:
+        return self._resposta
+    
+    
+    def _responder(self):
+        resposta_pipeline = pipeline("question-answering")
+        resposta_pipeline: Pipeline = resposta_pipeline(context = self._texto, question = self._pergunta)
+        self._resposta = str(resposta_pipeline["answer"])

pyvenv.cfg

@@ -0,0 +1,3 @@
+home = /usr/bin
+include-system-site-packages = false
+version = 3.10.12

requestsBaseModels/.gitignore

@@ -0,0 +1 @@
+__pycache__

requestsBaseModels/InterpretadorRequestBaseModel.py

@@ -0,0 +1,6 @@
+from pydantic import BaseModel
+
+
+class InterpretadorRequestBaseModel(BaseModel):
+    texto: str
+    pergunta: str

requirements.txt

@@ -0,0 +1,75 @@
+absl-py==2.1.0
+annotated-types==0.7.0
+anyio==4.4.0
+astunparse==1.6.3
+certifi==2024.6.2
+charset-normalizer==3.3.2
+click==8.1.7
+dnspython==2.6.1
+email_validator==2.2.0
+exceptiongroup==1.2.1
+fastapi==0.111.0
+fastapi-cli==0.0.4
+fastapi-sessions==0.3.2
+filelock==3.15.4
+flatbuffers==24.3.25
+fsspec==2024.6.1
+gast==0.6.0
+google-pasta==0.2.0
+grpcio==1.64.1
+h11==0.14.0
+h5py==3.11.0
+httpcore==1.0.5
+httptools==0.6.1
+httpx==0.27.0
+huggingface-hub==0.23.4
+idna==3.7
+itsdangerous==2.2.0
+Jinja2==3.1.4
+keras==3.4.1
+libclang==18.1.1
+Markdown==3.6
+markdown-it-py==3.0.0
+MarkupSafe==2.1.5
+mdurl==0.1.2
+ml-dtypes==0.3.2
+namex==0.0.8
+numpy==1.26.4
+opt-einsum==3.3.0
+optree==0.11.0
+orjson==3.10.5
+packaging==24.1
+protobuf==4.25.3
+pydantic==2.7.4
+pydantic_core==2.18.4
+Pygments==2.18.0
+python-dotenv==1.0.1
+python-multipart==0.0.9
+PyYAML==6.0.1
+regex==2024.5.15
+requests==2.32.3
+rich==13.7.1
+safetensors==0.4.3
+shellingham==1.5.4
+six==1.16.0
+sniffio==1.3.1
+starlette==0.37.2
+tensorboard==2.16.2
+tensorboard-data-server==0.7.2
+tensorflow==2.16.2
+tensorflow-io-gcs-filesystem==0.37.0
+termcolor==2.4.0
+tf_keras==2.16.0
+tokenizers==0.19.1
+tqdm==4.66.4
+transformers==4.42.3
+typer==0.12.3
+typing_extensions==4.12.2
+ujson==5.10.0
+urllib3==2.2.2
+uvicorn==0.30.1
+uvloop==0.19.0
+watchfiles==0.22.0
+websockets==12.0
+Werkzeug==3.0.3
+wrapt==1.16.0

responsesBaseModels/.gitignore

@@ -0,0 +1 @@
+__pycache__

responsesBaseModels/InterpretadorResponseBaseModel.py

@@ -0,0 +1,5 @@
+from pydantic import BaseModel
+
+
+class InterpretadorResponseBaseModel(BaseModel):
+    resposta: str

static/controllers/InterpretadorController.js

@@ -0,0 +1,65 @@
+class InterpretadorController {
+    cadastrarTexto = () => {
+        CadastroDeTextoPage();
+    }
+
+    /**
+     * 
+     * @param {Interpretador} interpretador 
+     */
+    fazerPergunta = (interpretador) => {
+        PerguntaPage(interpretador);
+    }
+
+    inserirTexto = () => {
+        /**
+         * @type {HTMLTextAreaElement}
+         */
+        const textoElement = document.getElementById("texto");
+
+        const texto = textoElement.value;
+        const interpretador = new Interpretador(texto);
+        PerguntaPage(interpretador);
+    }
+
+    /**
+     * 
+     * @param {Interpretador} interpretador 
+     */
+    mostrarQuestoes = (interpretador) => {
+        QuestoesPage(interpretador);
+    }
+
+    /**
+     * 
+     * @param {Interpretador} interpretador 
+     */
+    mostrarTexto = (interpretador) => {
+        TextoPage(interpretador);
+    }
+
+    /**
+     * 
+     * @param {Interpretador} interpretador 
+     * @returns {Promise<void>}
+     */
+    responder = async (interpretador) => {
+        /**
+         * @type {HTMLTextAreaElement}
+         */
+        const perguntaElement = document.getElementById("pergunta");
+
+        const texto = interpretador.getTexto();
+        const pergunta = perguntaElement.value;
+        const service = new InterpretadorService();
+        await service.responder(texto, pergunta).then((response) => {
+            const resposta = response.resposta;
+            const questao = new Questao(pergunta, resposta);
+            interpretador.adicionarQuestao(questao);
+            this.mostrarQuestoes(interpretador);
+        }).catch((error) => {
+            ErroPage("Não foi possível obter resposta.", interpretador);
+        });
+        
+    }
+}

static/main.js

@@ -0,0 +1,2 @@
+const interpretadorController = new InterpretadorController();
+interpretadorController.cadastrarTexto();

static/models/Interpretador.js

@@ -0,0 +1,40 @@
+class Interpretador {
+    /**
+     * @type {string}
+     * @private
+     */
+    texto;
+
+    /**
+     * @type {Questao[]}
+     */
+    questoes;
+
+    /**
+     * 
+     * @param {string} texto 
+     */
+    constructor(texto) {
+        this.texto = texto;
+        this.questoes = [];
+    }
+
+    getTexto = () => {
+        return this.texto;
+    }
+
+    /**
+     * 
+     * @param {Questao} questao 
+     */
+    adicionarQuestao = (questao) => {
+        this.questoes.push(questao);
+    }
+
+    /**
+     * @returns {Questao[]}
+     */
+    getQuestoes = () => {
+        return this.questoes.reverse();
+    }
+}

static/models/InterpretadorRequest.js

@@ -0,0 +1,21 @@
+class InterpretadorRequest {
+    /**
+     * @type {string}
+     */
+    texto;
+
+    /**
+     * @type {string}
+     */
+    pergunta;
+
+    /**
+     * 
+     * @param {string} texto 
+     * @param {string} pergunta 
+     */
+    constructor(texto, pergunta) {
+        this.texto = texto;
+        this.pergunta = pergunta;
+    }
+}

static/models/InterpretadorResponse.js

@@ -0,0 +1,6 @@
+class InterpretadorResponse {
+    /**
+     * @type {string}
+     */
+    resposta;
+}

static/models/Questao.js

@@ -0,0 +1,39 @@
+class Questao {
+    /**
+     * @type {string}
+     * @private
+     */
+    pergunta;
+
+    /**
+     * @type {string}
+     * @private
+     */
+    resposta;
+
+    /**
+     * 
+     * @param {string} pergunta 
+     * @param {string} resposta 
+     */
+    constructor(pergunta, resposta) {
+        this.pergunta = pergunta;
+        this.resposta = resposta;
+    }
+
+    /**
+     * 
+     * @returns {string}
+     */
+    getPergunta = () => {
+        return this.pergunta;
+    }
+
+    /**
+     * 
+     * @returns {string}
+     */
+    getResposta = () => {
+        return this.resposta;
+    }
+}

static/services/InterpretadorService.js

@@ -0,0 +1,23 @@
+class InterpretadorService {
+    /**
+     * 
+     * @param {string} texto 
+     * @param {string} pergunta 
+     * @returns {Promise<InterpretadorResponse>}
+     */
+    responder = async (texto, pergunta) => {
+        const request = new InterpretadorRequest(texto, pergunta);
+        const options = new Options("POST", request);
+
+        /**
+         * @type {Promise<InterpretadorResponse>}
+         */
+        const response = await fetch(urlApi, options).then((response) => {
+            return response.json();
+        }).catch((error) => {
+            console.log(error);
+        });
+
+        return response;
+    }
+}

static/style.css

@@ -0,0 +1,123 @@
+:root {
+    --azul: rgb(0, 0, 255);
+    --azul-claro: rgb(128, 128, 255);
+    --azul-escuro: rgb(0, 0, 128);
+    --azul-muito-claro: rgb(191, 191, 255);
+    --azul-muito-escuro: rgb(0, 0, 64);
+    --azul-pouco-claro: rgb(64, 64, 255);
+    --azul-pouco-escuro: rgb(0, 0, 191);
+    --vermelho: rgb(255, 0, 0);
+    --verde: rgb(0, 128, 0);
+    --familha-da-fonte: serif;
+    --margem-grande: 8px 8px 8px 8px;
+    --margem-pequena: 4px 4px 4px 4px;
+    --padding-texto: 4px 8px 4px 8px;
+    --tamanho-da-fonte: 16px;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    min-height: 100vh;
+    min-width: 100vw;
+  }
+
+  button {
+    background-color: var(--azul-escuro);
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-family: var(--familha-da-fonte);
+    font-size: var(--tamanho-da-fonte);
+    margin: var(--margem-grande);
+    padding: var(--padding-texto);
+  }
+
+  button:hover {
+    background-color: var(--azul-pouco-escuro);
+  }
+
+  button:active {
+    background-color: var(--azul);
+  }
+
+  h1 {
+    font-family: var(--familha-da-fonte);
+  }
+
+  label {
+    font-family: var(--familha-da-fonte);
+    font-size: var(--tamanho-da-fonte);
+    margin: var(--margem-grande);
+    padding: var(--padding-texto);
+  }
+
+  p {
+    font-family: var(--familha-da-fonte);
+    font-size: var(--tamanho-da-fonte);
+    margin: var(--margem-grande);
+    padding: var(--padding-texto);
+    width: 512px;
+  }
+
+  textarea {
+    font-family: var(--familha-da-fonte);
+    font-size: var(--tamanho-da-fonte);
+    margin: var(--margem-grande);
+    padding: var(--padding-texto);
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin: var(--margem-grande);
+  }
+
+  .erro {
+    color: var(--vermelho);
+    font-family: var(--familha-da-fonte);
+  }
+
+  .espera {
+    background-color: var(--azul-claro);
+    color: white;
+    font-family: var(--familha-da-fonte);
+    font-size: var(--tamanho-da-fonte);
+    margin: var(--margem-grande);
+    padding: var(--margem-grande);
+    text-align: center;
+    width: 512px;
+  }
+
+  .pergunta {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: var(--margem-grande);
+  }
+
+  .questao {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: var(--margem-grande);
+  }
+
+  .questao:hover {
+    background-color: var(--azul-muito-claro);
+  }
+
+  .questoes {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: var(--margem-grande);
+  }

static/utils/Api.js

@@ -0,0 +1 @@
+const urlApi = "http://0.0.0.0:7860";

static/utils/Options.js

@@ -0,0 +1,32 @@
+class Options {
+    /**
+     * @typedef OptionHeader
+     * @property {string} "Content-Type"
+     */
+
+    /**
+     * @type {string}
+     */
+    method
+
+    /**
+     * @type {OptionHeader}
+     */
+    headers;
+
+    /**
+     * @type {string}
+     */
+    body
+
+    /**
+     * 
+     * @param {string} method 
+     * @param {Object} dados 
+     */
+    constructor(method, dados) {
+        this.method = method;
+        this.headers = {"Content-type": "application/json"};
+        this.body = JSON.stringify(dados);
+    }
+}

static/views/components/Button.js

@@ -0,0 +1,11 @@
+/**
+ * 
+ * @param {string} textContent 
+ * @param {() => void} action 
+ */
+function Button(textContent, action) {
+    const button = document.createElement("button");
+    button.textContent = textContent;
+    button.addEventListener("click", action);
+    return button;
+}

static/views/components/ErroComponent.js

@@ -0,0 +1,11 @@
+/**
+ * 
+ * @param {string} textContent 
+ * @returns {HTMLHeadingElement}
+ */
+function ErroComponent(textContent) {
+    const component = document.createElement("h1");
+    component.className = "erro";
+    component.textContent = textContent;
+    return component;
+}

static/views/components/EsperaComponent.js

@@ -0,0 +1,9 @@
+/**
+ * @returns {HTMLDivElement}
+ */
+function EsperaComponent() {
+    const component = document.createElement("div");
+    component.className = "espera";
+    component.textContent = "Aguardando resposta";
+    return component;
+}

static/views/components/Heading.js

@@ -0,0 +1,10 @@
+/**
+ * 
+ * @param {string} textContent 
+ * @returns {HTMLHeadingElement}
+ */
+function Heading(textContent) {
+    const heading = document.createElement("h1");
+    heading.textContent = textContent;
+    return heading;
+}

static/views/components/Label.js

@@ -0,0 +1,12 @@
+/**
+ * 
+ * @param {string} textContent 
+ * @param {string} id 
+ * @returns {HTMLLabelElement}
+ */
+function Label(textContent, id) {
+    const label = document.createElement("label");
+    label.textContent = textContent;
+    label.htmlFor = id;
+    return label;
+}

static/views/components/Paragraph.js

@@ -0,0 +1,10 @@
+/**
+ * 
+ * @param {string} textContent 
+ * @returns {HTMLParagraphElement}
+ */
+function Paragraph(textContent) {
+    const paragraph = document.createElement('p');
+    paragraph.innerHTML = textContent;
+    return paragraph;
+}

static/views/components/TextArea.js

@@ -0,0 +1,14 @@
+/**
+ * 
+ * @param {string} id 
+ * @param {number} rows 
+ * @param {number} columns 
+ * @returns {HTMLTextAreaElement}
+ */
+function TextArea(id, rows, columns) {
+    const textArea = document.createElement("textarea");
+    textArea.id = id;
+    textArea.rows = rows;
+    textArea.cols = columns;
+    return textArea;
+}

static/views/containers/Buttons.js

@@ -0,0 +1,15 @@
+/**
+ * 
+ * @param {HTMLButtonElement[]} buttons 
+ * @returns {HTMLDivElement}
+ */
+function Buttons(buttons) {
+    const container = document.createElement("div");
+    container.className = "buttons";
+
+    buttons.forEach((button) => {
+        container.appendChild(button);
+    });
+
+    return container;
+}

static/views/containers/PerguntasContainer.js

@@ -0,0 +1,16 @@
+/**
+ * 
+ * @param {string} label 
+ * @param {string} id 
+ * @param {string} className 
+ * @param {number} rows 
+ * @param {number} columns 
+ * @returns {HTMLDivElement}
+ */
+function PerguntasContainer(label, id, className, rows, columns) {
+    const container = document.createElement("div");
+    container.className = className;
+    container.appendChild(Label(label, id));
+    container.appendChild(TextArea(id, rows, columns));
+    return container;
+}

static/views/containers/QuestaoContainer.js

@@ -0,0 +1,16 @@
+/**
+ * 
+ * @param {Questao} questao 
+ * @returns {HTMLDivElement}
+ */
+function QuestaoContainer(questao) {
+    const container = document.createElement("div");
+    container.className = "questao";
+    const pergunta = questao.getPergunta();
+    const resposta = questao.getResposta();
+    const perguntaParagraph = Paragraph(`<strong>Pergunta: </strong>${pergunta}`);
+    const respostaParagraph = Paragraph(`<strong>Resposta: </strong>${resposta}`);
+    container.appendChild(perguntaParagraph);
+    container.appendChild(respostaParagraph);
+    return container;
+}

static/views/containers/QuestoesContainer.js

@@ -0,0 +1,15 @@
+/**
+ * 
+ * @param {QuestoesContainer[]} questoesContainer 
+ * @returns {HTMLDivElement}
+ */
+function QuestoesContainer(questoesContainer) {
+    const container = document.createElement("div");
+    container.className = "questoes";
+
+    questoesContainer.forEach((questaoContainer) => {
+        container.appendChild(questaoContainer);
+    });
+
+    return container;
+}

static/views/containers/TextoContainer.js

@@ -0,0 +1,17 @@
+/**
+ * 
+ * @param {string} texto 
+ * @returns {HTMLDivElement}
+ */
+function TextoContainer(texto) {
+    const container = document.createElement("div");
+    container.className = "texto";
+    const paragraphs = texto.split('\n');
+
+    paragraphs.forEach((paragraph) => {
+        const paragraphElement = Paragraph(paragraph)
+        container.appendChild(paragraphElement);
+    });
+
+    return container;
+}

static/views/pages/CadastroDeTextoPage.js

@@ -0,0 +1,18 @@
+function CadastroDeTextoPage() {
+    const controller = new InterpretadorController();
+
+    /**
+     * @type {HTMLElement[]}
+     */
+    const elements = [
+        Heading("Digite ou cole um texto"),
+        TextArea("texto", 16, 64),
+        Button("Submeter texto", controller.inserirTexto)
+    ];
+
+    const page = Page();
+
+    elements.forEach((element) => {
+        page.appendChild(element);
+    });
+}

static/views/pages/ErroPage.js

@@ -0,0 +1,39 @@
+/**
+ * 
+ * @param {string} mensagem 
+ * @param {Interpretador} interpretador 
+ */
+function ErroPage(mensagem, interpretador) {
+    const controller = new InterpretadorController();
+
+    function fazerPergunta() {
+        controller.fazerPergunta(interpretador);
+    }
+
+    function reverTexto() {
+        controller.mostrarTexto(interpretador);
+    }
+
+    function mostrarQuestoes() {
+        controller.mostrarQuestoes(interpretador);
+    }
+
+    /**
+     * @type {HTMLElement[]}
+     */
+    const elements = [
+        ErroComponent(mensagem),
+        Buttons([
+            Button("Fazer Pergunta", fazerPergunta),
+            Button("Rever Texto", reverTexto),
+            Button("Mostrar Questoes Feitas", mostrarQuestoes),
+            Button("Escolher Outro Texto", controller.cadastrarTexto)
+        ])
+    ];
+
+    const page = Page();
+
+    elements.forEach((element) => {
+        page.appendChild(element);
+    });
+}

static/views/pages/Page.js

@@ -0,0 +1,8 @@
+/**
+ * @returns {HTMLBodyElement}
+ */
+function Page() {
+    const page = document.getElementsByTagName("body")[0];
+    page.innerHTML = '';
+    return page;
+}

static/views/pages/PerguntaPage.js

@@ -0,0 +1,48 @@
+/**
+ * 
+ * @param {Interpretador} interpretador 
+ */
+function PerguntaPage(interpretador) {
+    const controller = new InterpretadorController();
+
+    /**
+     * @type {HTMLElement[]}
+     */
+    let elements = [];
+
+    function addElements() {
+        elements.forEach((element) => {
+            page.appendChild(element);
+        });
+    }
+
+    function responder() {
+        const esperaComponent = EsperaComponent();
+        elements.unshift(esperaComponent);
+        addElements();
+        controller.responder(interpretador);
+    }
+
+    function mostrarTexto() {
+        controller.mostrarTexto(interpretador);
+    }
+
+    function mostrarQuestoes() {
+        controller.mostrarQuestoes(interpretador);
+    }
+
+    elements = [
+        Heading("Digite uma Pergunta"),
+        TextArea("pergunta", 2, 64),
+        Buttons([
+            Button("Obter Resposta", responder),
+            Button("Rever Texto", mostrarTexto),
+            Button("Mostrar Questoes Feitas", mostrarQuestoes),
+            Button("Escolher Outro Texto", controller.cadastrarTexto)
+        ])
+    ];
+
+    const page = Page();
+
+    addElements();
+}

static/views/pages/QuestoesPage.js

@@ -0,0 +1,45 @@
+/**
+ * 
+ * @param {Interpretador} interpretador 
+ */
+function QuestoesPage(interpretador) {
+    const questoes = interpretador.getQuestoes();
+    const controller = new InterpretadorController();
+
+    function fazerPergunta() {
+        controller.fazerPergunta(interpretador);
+    }
+
+    function reverTexto() {
+        controller.mostrarTexto(interpretador);
+    }
+
+    /**
+     * @type {HTMLDivElement[]}
+     */
+    const questoesContainer = [];
+
+    questoes.forEach((questao) => {
+        const questaoContainer = QuestaoContainer(questao);
+        questoesContainer.push(questaoContainer);
+    });
+
+    /**
+     * @type {HTMLElement[]}
+     */
+    const elements = [
+        Heading("Lista de Questões Feitas"),
+        QuestoesContainer(questoesContainer),
+        Buttons([
+            Button("Fazer Outra Pergunta", fazerPergunta),
+            Button("Rever texto", reverTexto),
+            Button("Escolher Outro Texto", controller.cadastrarTexto)
+        ])
+    ];
+
+    const page = Page();
+
+    elements.forEach((element) => {
+        page.appendChild(element);
+    });
+}

static/views/pages/TextoPage.js

@@ -0,0 +1,34 @@
+/**
+ * 
+ * @param {Interpretador} interpretador 
+ */
+function TextoPage(interpretador) {
+    const controller = new InterpretadorController();
+
+    function fazerPergunta() {
+        controller.fazerPergunta(interpretador);
+    }
+
+    function mostrarQuestoes() {
+        controller.mostrarQuestoes(interpretador);
+    }
+
+    /**
+     * @type {HTMLElement[]}
+     */
+    const elements = [
+        Heading("Texto"),
+        TextoContainer(interpretador.getTexto()),
+        Buttons([
+            Button("Fazer Pergunta", fazerPergunta),
+            Button("Mostrar Questoes Feitas", mostrarQuestoes),
+            Button("Escolher Outro Texto", controller.cadastrarTexto)
+        ])
+    ];
+
+    const page = Page();
+
+    elements.forEach((element) => {
+        page.appendChild(element);
+    });
+}

templates/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/static/style.css">
+    <title>Interpretador de Texto</title>
+</head>
+<body>
+    <script src="/static/utils/Api.js"></script>
+    <script src="/static/utils/Options.js"></script>
+    <script src="/static/models/Interpretador.js"></script>
+    <script src="/static/models/InterpretadorRequest.js"></script>
+    <script src="/static/models/InterpretadorResponse.js"></script>
+    <script src="/static/models/Questao.js"></script>
+    <script src="/static/services/InterpretadorService.js"></script>
+    <script src="/static/controllers/InterpretadorController.js"></script>
+    <script src="/static/views/components/Button.js"></script>
+    <script src="/static/views/components/ErroComponent.js"></script>
+    <script src="/static/views/components/EsperaComponent.js"></script>
+    <script src="/static/views/components/Heading.js"></script>
+    <script src="/static/views/components/Label.js"></script>
+    <script src="/static/views/components/Paragraph.js"></script>
+    <script src="/static/views/components/TextArea.js"></script>
+    <script src="/static/views/containers/Buttons.js"></script>
+    <script src="/static/views/containers/PerguntasContainer.js"></script>
+    <script src="/static/views/containers/QuestaoContainer.js"></script>
+    <script src="/static/views/containers/QuestoesContainer.js"></script>
+    <script src="/static/views/containers/TextoContainer.js"></script>
+    <script src="/static/views/pages/Page.js"></script>
+    <script src="/static/views/pages/CadastroDeTextoPage.js"></script>
+    <script src="/static/views/pages/ErroPage.js"></script>
+    <script src="/static/views/pages/PerguntaPage.js"></script>
+    <script src="/static/views/pages/QuestoesPage.js"></script>
+    <script src="/static/views/pages/TextoPage.js"></script>
+    <script src="/static/main.js"></script>    
+</body>
+</html>