formidablelabs / babel-bridge Goto Github PK
View Code? Open in Web Editor NEWSimple React+Sanity app where content is automatically translated into the user’s language
Simple React+Sanity app where content is automatically translated into the user’s language
Once #39 has been merged. We will need to update the web front end to use these new fields instead of the older data structure
The content queries are returning draft documents. They should only return published documents.
Move all custom work into an actual sanity plugin. To do this well need to use Sanity's plugin kit.
Once we have the basic building blocks in place, it would be good if we were able to package this up into a Sanity plugin.
Depends on #9
This is a follow-on from #9, which implemented on-demand translation of content. This ticket did not account for scenarios where the base content is updated after the translation has been created.
Update the function to check for two conditions: first, the existence of a translation, and second, whether the base content has been updated since that translation was created. If the base content is newer, a new translation should be requested.
As were coming close to the end of this project, it would be good to think of ways we can share this experiment to the world. We agree the most sensible approach would be creating a blog post.
Feel free to use this ticket as brain dump of topics to cover.
We need a utility function that can be used to translate content from Sanity. The function should take a Sanity document (or JSON string), and an IETF language tag (e.g. es-US
), and return a translated version of it.
Bun
.To allow us to create a custom plugin to ship it to the world we need to remove the dependancy of the sanity document translations plugin.
Removing this plugin will have the effects mentioned here #32
localeText
custom inputlocalePortableText
custom inputWe need our Sanity schema to be structured to facilitate the storage of translations for text content.
Update each of the existing document schemas to hold fields for en-US
(required), and mi-NZ
(optional). It may be useful to consider using the following Sanity plugin: https://www.sanity.io/plugins/i18n-fields.
en-US
(required), and mi-NZ
(optional).Currently the translation functionality is reliant on the output of the LLM being in a specific format. We want to move away from this and instead use a structured output format that can easily be parsed.
Investigate usage of the following pattern for structured output: https://js.langchain.com/docs/modules/chains/popular/structured_output
If this is suitable, then update the translate
function to use this format.
translate
function is updated to use structured outputextractJSON
function is removed or updated as requiredCan be picked up after #9.
Our current implementation of translations is based on locales. For the purpose of reaching our MVP, we should strip back to languages instead of locales. This will allow us to focus on the core functionality of translations and not worry about the complexity of locales.
Completion of this ticket will require updating the following:
en
we will group all these into "English"Depends on #7
It would be useful to have nice pre-written content so we can show off the features of the app. This content should be in a separate dataset so that it can be maintained separately from the development dataset.
staging
.Let's stay on the Bun
run and use ElysiaJS
for our server. It has some nice error handling and should be lightning fast.
Also, it's about time we start dynamically returning content in the user's language rather than just returning the default translation.
Express.js
server for ElysiaJS
/api
routeAt the moment we can detect the default language from the schema in sanity.config.ts
but ideally we also need to be able to do this within the custom desk structure where we currently have:
const defaultLanguage = {
id: 'en-US', title: 'English (US)', default: true
};
This could possibly cause some issues if the default language were to ever change in the schema
Since we need supported languages to be defined for Sanity to structure the references between documents, since we cannot hard code this, we need a schema that we can query any documents (languages) stored there to use.
supported languages
schemaIn our recent frontend (FE) refactor, we eliminated the API that was powered by Elysia JS, a web framework enhanced by Bun. While this API was a perfect fit for our headless architecture, further investigation suggests that Fastify might be a superior choice for our needs. The primary advantage of Fastify lies in its reliance on the Node.js runtime, which enjoys broader support and compatibility compared to the Bun runtime. This change could significantly expand our deployment options and potentially offer other benefits like improved performance, better community support, and advanced features.
Required Routes
Optional Routes
Now that we have a REST API that queries content from Sanity, we can start using it in the frontend.
Update the frontend to fetch content from the server and display it. Don't worry much about styling as this is just a POC for now, but feel free to use Tailwind classes for some basic styles.
/api
folder/components
folderThis feature will allow content managers to manually trigger the AI-based translation of a document. This will be useful if a content manager wants to shortcut the automatic translation process to ensure that a document is translated as soon as possible.
We propose converting our current repository, sanity-translations-experiment
, into a monorepo. This change aims to streamline our development process and improve project management.
Better Organization
Unified Tools and Configurations
Easier Collaboration
Streamlined Dependency Management
Efficient Builds with Turborepo
Scalable Structure
Simplified Maintenance
Consistent CI/CD
Clearer Project Overview
Currently, we have a global README.md file which covers the project at a high level. We need to have or create module level markdown files to explain how each portion works.
Arguably the most important feature of this project is the translation of Sanity content on-demand. We need to modify the getPost
function so that, if the requested post is not in the user's language, it will be translated into the user's language before being returned.
Critically, it will also need to be patched back into Sanity so that the next time it is requested, it will be returned in the user's language without needing to be translated again.
Note: For now, we do not need to worry about whether the translations are up-to-date. We will deal with that in a later issue (#10).
Update the frontend to gracefully handle requests which take a while to load. Currently, our server is making a call to Open AI, this can take some time leading to the user sitting around bored. With react-router-dom
we can optimistically render the UI so page transitions are almost instant while we wait for content to load
This is a follow-on from #3 which had some issues mocking the openai
module due to limitations still present in bun
: oven-sh/bun#5394.
It may be preferable to just use jest
for our tests instead of the bun
test runner.
This issue is to finish tests for the translate
function.
translate
functionMissing areas in the README.md
There is an inconsistent experience between viewing a post, and viewing the list of posts. Individual posts are translated, but the list of posts is not.
Let's update the server to translate the list of posts too.
Note: We may require a new prompt for this. Consider various options and report back to the team before proceeding with the implementation.
We need a single source of truth for our linting and prettier config. This will allow us to have a consistent code style across the project, and eliminate noise in PRs.
workspaces
config in package.json
web
workspaceeslint-config-prettier
eslint-plugin-prettier
import/order
import/no-extraneous-dependencies
@typescript-eslint/no-explicit-any
We need to configure a server-side client for Sanity. This client will be used to make read and write requests to the Sanity datasets.
The plugin should come with some basic configuration options. As our plugin is agnostic to the type of schema it should work with. We need to allow users to customise the plugin to work with their data model. The following configuration options would be needed in order for us to provider a "headless" solution.
Required Configurations
If any required options are missed. the plugin should throw an error
apiKey
- Open AI api keysanityToken
- user generated sanity token, this is needed in order for us to run mutations against their dataset and studioschemaTypes
- an array of schema types that plugin should render on, a minimum of one schema type must be addedOptional Configurations
sanityApiVersion
- specific api version of sanity the user would like to use. This will default to the latest version if nothing is setdefaultLanguage
- default language/locale that is selected in the custom dropdown on a given document. This will default to an empty string if nothing is setDescription to be completed
Needs #9 to be implemented.
Once The translation work around creating new documents is done, it would be good if we had a caching system in place to return translated documents quickly
We need Sanity to control the content of this app. This ticket is for the initial setup of Sanity.
Currently, were sending the entire document to open AI for translating. With the new schema, we will only need to send over the title and content fields. Once #39 has been merged, we will need to update the server code to do this
Sanity's documentation cautions against using a dynamic date for the apiVersion
, which we are doing here, here, and here.
Let's hardcode this to today's date ('today' being the day this ticket gets picked up 😆).
apiVersion
is hardcoded to today's dateapiVersion
is defined in a single place that can be shared between the studio and the serverNow that our app is starting to take shape, we should ensure that the README reflects the ongoing progress and provides clarity about the current implementation details.
pnpm
and bun
)/studio
and /server
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.