arthur/spanish-learner
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/spanish-learner.git synced 2026-01-14 12:14:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Working

Browse Source
This commit is contained in:
Arthur Danjou
2024-08-16 12:48:53 +02:00
parent 2d64c753cc
commit 727c4cb779
13 changed files with 1217 additions and 1177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/app.config.ts
View File

@@ -3,9 +3,14 @@ export default defineAppConfig({
gray: 'neutral',
primary: 'red',
container: {
constrained: 'max-w-xl',
padding: 'px-4 sm:px-6 lg:px-8 py-4',
},
card: {
background: 'bg-neutral-900',
header: {
base: 'uppercase font-bold tracking-widest text-white',
},
},
},
icon: {
collections: ['heroicons', 'ph'],

22
app/app.vue
View File

@@ -12,22 +12,22 @@ mode.value = mode.value || 'Spanish'
<div>
<NuxtLoadingIndicator />
<UContainer>
<div class="my-4 flex items-center justify-between">
<p>Mode: {{ mode }}</p>
<UButton
:color="mode === 'Spanish' ? 'cyan' : 'yellow'"
variant="solid"
:label="mode === 'Spanish' ? 'Switch to French' : 'Switch to Spanish'"
<div class="grid grid-cols-1 md:grid-cols-6 gap-4 auto-rows-max">
<UCard
class="order-first"
@click="mode === 'Spanish' ? mode = 'French' : mode = 'Spanish'"
/>
</div>
<div class="bg-neutral-900 rounded-lg max-h-[90vh] h-[90vh] overflow-scroll p-4">
>
<p class="text-lg font-bold uppercase" :class="mode === 'Spanish' ? 'text-red-500' : 'text-blue-500'">
Mode: {{ mode }}
</p>
</UCard>
<Translation />
<Verbs />
<Words />
<Demonstratifs />
<Modals />
<Terminaisons />
<Demonstratifs />
<Prononciation />
<Terminaisons />
</div>
</UContainer>
</div>

8
app/components/Demonstratifs.vue
View File

@@ -41,6 +41,10 @@ const rows = [
</script>
<template>
<UDivider class="mt-12 mb-8" size="lg" label="Démonstratifs" />
<UTable :rows="rows" :columns="columns" />
<UCard class="md:col-span-4">
<template #header>
<h1>Démonstratifs</h1>
</template>
<UTable :rows="rows" :columns="columns" />
</UCard>
</template>

12
app/components/Modals.vue
View File

@@ -59,10 +59,10 @@ const ModalRows = [
</script>
<template>
<UDivider class="mt-12 mb-8" size="lg" label="Ser, Estar, Tener, Haber" />
<UTable :columns="ModalColumns" :rows="ModalRows" />
<UCard class="md:col-span-2 md:row-span-2">
<template #header>
<h1>Modaux</h1>
</template>
<UTable :columns="ModalColumns" :rows="ModalRows" />
</UCard>
</template>
<style scoped>
</style>

12
app/components/Prononciation.vue
View File

@@ -59,10 +59,10 @@ const PrononciationRows = [
</script>
<template>
<UDivider class="mt-12 mb-8" size="lg" label="Prononciation" />
<UTable :rows="PrononciationRows" />
<UCard class="md:row-span-2 md:col-span-2">
<template #header>
<h1>Prononciation</h1>
</template>
<UTable :rows="PrononciationRows" />
</UCard>
</template>
<style scoped>
</style>

12
app/components/Terminaisons.vue
View File

@@ -58,10 +58,10 @@ const VerbColumns = [
</script>
<template>
<UDivider class="mt-12 mb-8" size="lg" label="Terminaisons" />
<UTable :columns="VerbColumns" :rows="VerbRows" />
<UCard class="md:col-span-4 md:row-span-2">
<template #header>
<h1>Terminaisons</h1>
</template>
<UTable :columns="VerbColumns" :rows="VerbRows" />
</UCard>
</template>
<style scoped>
</style>

68
app/components/Translation.vue Normal file
View File

@@ -0,0 +1,68 @@
<script setup lang="ts">
import { z } from 'zod'
import type { FormSubmitEvent } from '#ui/types'
const mode = useCookie('mode')
const sent = ref(false)
const schema = z.object({
text: z.string(),
})
type Schema = z.output<typeof schema>
const state = reactive({
text: undefined,
})
const response = ref()
async function onSubmit(event: FormSubmitEvent<Schema>) {
const body = {
text: event.data.text,
target_lang: mode.value === 'Spanish' ? 'French' : 'Spanish',
source_lang: mode.value === 'Spanish' ? 'Spanish' : 'French',
}
sent.value = true
response.value = await $fetch('/api/translate', {
method: 'POST',
body: JSON.stringify(body),
})
}
function resetForm() {
response.value = null
sent.value = false
state.text = undefined
}
</script>
<template>
<UCard class="md:row-span-1 md:col-span-5 order-first">
<template #header>
<h1>Translation</h1>
</template>
<template #default>
<UForm v-if="!sent" :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
<UFormGroup label="Text to translate" name="text">
<UTextarea v-model="state.text" type="text" />
</UFormGroup>
<UButton type="submit">
Translate in {{ mode === 'Spanish' ? 'French' : 'Spanish' }}
</UButton>
</UForm>
<div v-else>
<div v-if="response" class="mb-4 flex gap-2">
<h1 class="font-bold">
Translated Text:
</h1>
<p class="italic">
{{ response.translated_text }}
</p>
</div>
<h1 v-else class="mb-4 italic">
Loading translation...
</h1>
<UButton label="Translate again" @click.prevent="resetForm()" />
</div>
</template>
</UCard>
</template>

85
app/components/Verbs.vue
View File

@@ -10,47 +10,48 @@ const mode = useCookie('mode')
</script>
<template>
<div v-if="verb" class="space-y-4 mx-auto flex flex-col justify-center">
<div class="flex gap-2 items-center">
<h3 class="text-neutral-500">
Verbos:
</h3>
<h1 v-if="mode === 'Spanish'" class="font-bold">
{{ verb.verb }}
</h1>
<h1 v-else class="font-bold p-1 rounded-md" :class="revealedVerb ? 'duration-300' : 'bg-gray-700 text-gray-700'">
{{ verb.verb }}
</h1>
<UCard class="md:col-span-2 md:row-span-1">
<template #header>
<h1>Verbos</h1>
</template>
<div v-if="verb" class="space-y-4 flex flex-col justify-center">
<div class="flex gap-2 items-center">
<h3 class="text-neutral-500">
Verbos:
</h3>
<h1 v-if="mode === 'Spanish'" class="font-bold">
{{ verb.verb }}
</h1>
<h1 v-else class="font-bold p-1 rounded-md" :class="revealedVerb ? 'duration-300' : 'bg-gray-700 text-gray-700'">
{{ verb.verb }}
</h1>
</div>
<div class="flex gap-2 items-end">
<h3 class="text-neutral-500">
Typo:
</h3>
<h1 class="font-bold">
-{{ verb.verb.slice(-2) }}
</h1>
</div>
<div class="flex gap-2 items-center">
<h3 class="text-neutral-500">
Traduccion:
</h3>
<h1 v-if="mode === 'Spanish'" class="font-bold p-1 rounded-md" :class="revealedVerb ? 'duration-300' : 'bg-gray-700 text-gray-700'">
{{ verb.translation }}
</h1>
<h1 v-else class="font-bold">
{{ verb.translation }}
</h1>
</div>
<UButton
:color="revealedVerb ? 'green' : 'red'"
variant="solid"
:label="revealedVerb ? 'Change Verb' : 'Reveal Verb'"
:block="true"
@click.prevent="revealedVerb ? refreshVerb() : revealedVerb = true"
/>
</div>
<div class="flex gap-2 items-end">
<h3 class="text-neutral-500">
Typo:
</h3>
<h1 class="font-bold">
-{{ verb.verb.slice(-2) }}
</h1>
</div>
<div class="flex gap-2 items-center">
<h3 class="text-neutral-500">
Traduccion:
</h3>
<h1 v-if="mode === 'Spanish'" class="font-bold p-1 rounded-md" :class="revealedVerb ? 'duration-300' : 'bg-gray-700 text-gray-700'">
{{ verb.translation }}
</h1>
<h1 v-else class="font-bold">
{{ verb.translation }}
</h1>
</div>
<UButton
:color="revealedVerb ? 'green' : 'red'"
variant="solid"
:label="revealedVerb ? 'Change Verb' : 'Reveal Verb'"
:block="true"
@click.prevent="revealedVerb ? refreshVerb() : revealedVerb = true"
/>
</div>
</UCard>
</template>
<style scoped>
</style>

70
app/components/Words.vue
View File

@@ -11,40 +11,40 @@ const mode = useCookie('mode')
</script>
<template>
<UDivider class="mt-12 mb-8" size="lg" label="Palabras" />
<div v-if="word" class="space-y-4 mx-auto flex flex-col justify-center">
<div class="flex gap-2 items-center">
<h3 class="text-neutral-500">
Palabra:
</h3>
<h1 v-if="mode === 'Spanish'" class="font-bold">
{{ word.word }}
</h1>
<h1 v-else class="font-bold p-1 rounded-md" :class="revealedWord ? 'duration-300' : 'bg-gray-700 text-gray-700'">
{{ word.word }}
</h1>
<UCard class="md:col-span-2 md:row-span-1">
<template #header>
<h1>Palabras</h1>
</template>
<div v-if="word" class="space-y-4 mx-auto flex flex-col justify-center">
<div class="flex gap-2 items-center">
<h3 class="text-neutral-500">
Palabra:
</h3>
<h1 v-if="mode === 'Spanish'" class="font-bold">
{{ word.word }}
</h1>
<h1 v-else class="font-bold p-1 rounded-md" :class="revealedWord ? 'duration-300' : 'bg-gray-700 text-gray-700'">
{{ word.word }}
</h1>
</div>
<div class="flex gap-2 items-center cursor-pointer" @click.prevent="revealedWord = true">
<h3 class="text-neutral-500">
Traducción:
</h3>
<h1 v-if="mode === 'Spanish'" class="font-bold p-1 rounded-md" :class="revealedWord ? 'duration-300' : 'bg-gray-700 text-gray-700'">
{{ word.translation }}
</h1>
<h1 v-else class="font-bold">
{{ word.translation }}
</h1>
</div>
<UButton
:color="revealedWord ? 'green' : 'blue'"
variant="solid"
:label="revealedWord ? 'Change Word' : 'Reveal Word'"
:block="true"
@click.prevent="revealedWord ? refreshWord() : revealedWord = true"
/>
</div>
<div class="flex gap-2 items-center cursor-pointer" @click.prevent="revealedWord = true">
<h3 class="text-neutral-500">
Traducción:
</h3>
<h1 v-if="mode === 'Spanish'" class="font-bold p-1 rounded-md" :class="revealedWord ? 'duration-300' : 'bg-gray-700 text-gray-700'">
{{ word.translation }}
</h1>
<h1 v-else class="font-bold">
{{ word.translation }}
</h1>
</div>
<UButton
:color="revealedWord ? 'green' : 'blue'"
variant="solid"
:label="revealedWord ? 'Change Word' : 'Reveal Word'"
:block="true"
@click.prevent="revealedWord ? refreshWord() : revealedWord = true"
/>
</div>
</UCard>
</template>
<style scoped>
</style>

1
nuxt.config.ts
View File

@@ -14,6 +14,7 @@ export default defineNuxtConfig({
cache: true,
database: true,
analytics: true,
ai: true,
},
// Nuxt Color Mode

26
package.json
View File

@@ -14,27 +14,27 @@
"db:generate": "drizzle-kit generate"
},
"dependencies": {
"@iconify/json": "^2.2.232",
"@nuxt/ui": "^2.18.3",
"@nuxthub/core": "^0.7.1",
"@iconify/json": "^2.2.237",
"@nuxt/ui": "^2.18.4",
"@nuxthub/core": "^0.7.2",
"@nuxtjs/google-fonts": "^3.2.0",
"drizzle-orm": "^0.32.1",
"drizzle-orm": "^0.32.2",
"h3-zod": "^0.5.3",
"nuxt": "^3.12.4",
"vue": "^3.4.35",
"vue": "^3.4.38",
"zod": "^3.23.8"
},
"devDependencies": {
"@antfu/eslint-config": "^2.23.2",
"@antfu/eslint-config": "^2.25.2",
"@nuxt/devtools": "^1.3.9",
"@nuxt/ui": "^2.18.3",
"@types/node": "^22.0.0",
"@vueuse/core": "^10.11.0",
"@vueuse/nuxt": "^10.11.0",
"drizzle-kit": "^0.23.1",
"eslint": "^9.7.0",
"@types/node": "^22.3.0",
"@vueuse/core": "^10.11.1",
"@vueuse/nuxt": "^10.11.1",
"drizzle-kit": "^0.23.2",
"eslint": "^9.9.0",
"typescript": "^5.5.4",
"vue-tsc": "^2.0.28",
"wrangler": "^3.67.1"
"vue-tsc": "^2.0.29",
"wrangler": "^3.72.0"
}
}

2054
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

17
server/api/translate.post.ts Normal file
View File

@@ -0,0 +1,17 @@
import { z, zh } from 'h3-zod'
export default defineEventHandler(async (event) => {
const ai = hubAI()
const { source_lang, target_lang, text } = await zh.useValidatedBody(event, z.object({
source_lang: z.enum(['French', 'Spanish']),
target_lang: z.enum(['French', 'Spanish']),
text: z.string(),
}))
return await ai.run('@cf/meta/m2m100-1.2b', {
source_lang: source_lang.toLowerCase(),
target_lang: target_lang.toLowerCase(),
text,
})
})