Transcription App for Chinese-Americans
-
(Optional, only if it's too awkward to hold the menu etc)
-
Look at Chinese characters and carefully write it in the handwriting input qhanzi section
-
Shoutouts to Ben Burlock for great work on qhanzi!
-
You can stop in the middle of writing a Chinese character and come back, unlike with native iPhone Chinese handwriting input.
-
If Chinese character candidates do not show up when using the qhanzi Iframe, there may be a caching issue, you may have to reload the page for it to work correctly
-
-
When you are all done writing the Chinese characters by hand, copy and paste the Chinese characters into the Bing Translate section
- You will be able to see the Pinyin pronunciation and meaning
- If you still can't pronounce it, you can click the little speaker icon in the Bing Translate window to hear how it's pronounced
I have plans to expand this app's capabilities, but for now:
- The local Chinese restaurants in Irvine, CA (I am here on an internship) often feature staff / waiters who do not speak English
- Which is fine for me, since I am fluent from learning to speak (Mandarin) Chinese from my parents
- However, I do have to order in Chinese, and I often cannot read the menu very well (having a much shakier Chinese literacy)
- Thus, I need a way to accurately decipher Chinese characters on the menu if I don't already recognize them
- There is native support for Chinese handwriting input on iPhone, but it's not very good / clearly targeted at fluent Chinese readers / writers
- The moment you switch browser or app tabs on iPhone, the handwriting input resets, which is an issue for someone like me who forgot the stroke order of a character on the restaurant menu midway through it
- Thus I am using Iframes with qhanzi, a website that has way better handwriting input and does not reset your input the moment you leave the page
- Currently I have to open qhanzi, Google or Bing Translate, and maybe also a photo on my phone (since it's awkward to stand around holding the menu) to order
- I need the Google or Bing Translate to:
- Get the Pinyin transcription of the characters (the most important part, how to actually pronounce the characters so I can make my restaurant food order in Chinese)
- Get the meaning of the characters (important in case there is some term I don't recognize, which does happen on occasion)
- PS I am using Bing Translator in my version cause Google Translator blocks Iframes for security reasons or something
- I use Iframes to combine what were otherwise 3 separate services (image embed, handwriting input, translator) into one app so I don't have to tab in and out on my phone constantly, greatly improving my workflow
- Had to modify Iframes to allow for sharing clipboard between Iframes
It probably doesn't matter, but just in case, I am on node version 16.20.0
(run node -v
in terminal to check). You can change node versions easily with nvm for Unix or nvm for Windows
npm install
- Installs dependencies
npm start
- Runs the app in the development mode, launches at http://localhost:3000
npm run prettier
- Formats code
- Workflow Permissions - https://github.com/orgs/community/discussions/26694#discussioncomment-5551445
- Turn on "Read and Write Permissions" for "Workflow Permissions"
- Note the homepage variable in
package.json
to ensure the deployed site pulls the static files from right directory
- qhanzi Handwriting Input - Credits to Ben Bullock
- Bing Translator - Thanks for not blocking Iframes unlike Google Translate
- This Sandbox from Ramesh Patel I used as a basic template for getting started on the Iframe stuff