ManeraKai: 1 simplytranslate_web: Adding Definitions to Google 5 files changed, 463 insertions(+), 3 deletions(-)
Copy & paste the following snippet into your terminal to import this patchset into git:
curl -s https://lists.sr.ht/~metalune/simplytranslate-devel/patches/28985/mbox | git am -3Learn more about email & git
--- main.py | 34 +++++- requirements.txt | 2 +- static/styles/google.css | 200 ++++++++++++++++++++++++++++++++++ templates/google.html | 228 +++++++++++++++++++++++++++++++++++++++ templates/index.html | 2 +- 5 files changed, 463 insertions(+), 3 deletions(-) create mode 100644 static/styles/google.css create mode 100644 templates/google.html diff --git a/main.py b/main.py index cfa9bb8..892d457 100644 --- a/main.py +++ b/main.py @@ -125,6 +125,33 @@ async def api_translate(): return engine.translate(text, from_language=from_language, to_language=to_language) +# @app.route("/api/translate_advanced/", methods=["GET", "POST"]) +# async def api_translate_advanced(): +# if request.method == "POST": +# args = await request.form +# elif request.method == "GET": +# args = request.args + +# engine_name = args.get("engine") + +# text = args.get("text") +# from_language = args.get("from") +# to_language = args.get("to") + +# if from_language == None: +# from_language = "auto" + +# if to_language == None: +# to_language = "en" + +# engine = get_engine(engine_name, engines, engines[0]) + +# from_language = to_lang_code(from_language, engine) +# to_language = to_lang_code(to_language, engine) + +# if engine_name != "google": +# return "" +# return engine.translate(text, from_language=from_language, to_language=to_language) @app.route("/prefs", methods=["POST", "GET"]) async def prefs(): @@ -323,9 +350,14 @@ async def index(): prefs = dict_to_prefs(request.cookies) + html_template = "index.html" + + if engine_name == "google": + html_template = "google.html" + response = await make_response( await render_template( - "index.html", + html_template, inp=inp, translation=translation, from_l=from_lang, diff --git a/requirements.txt b/requirements.txt index 081da6f..fc5a5c1 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,2 +1,2 @@ quart -git+https://git.sr.ht/~metalune/simplytranslate_engines +../simplytranslate_engines diff --git a/static/styles/google.css b/static/styles/google.css new file mode 100644 index 0000000..c6fe79a --- /dev/null +++ b/static/styles/google.css @@ -0,0 +1,200 @@ +form.the_grid { + display: grid; + margin: auto; + width: 1100px; + gap: 10px; + grid-template-areas: + "translation_engines translation_engines" + "from_to_langs from_to_langs" + "text_input text_output" + "tts_input tts_output" + "translation_button translation_button" + "definitions translations"; + +} + +div.translation_engines { + grid-area: translation_engines; +} + +div.from_to_langs { + grid-area: from_to_langs; +} + +div.textarea { + width: 100%; + display: flex; + margin: auto; +} + +div.text_input { + justify-content: end; + grid-area: text_input; +} + +div.text_output { + justify-content: start; + grid-area: text_output; +} + +div.tts_input { + grid-area: tts_input; +} + +div.tts_output { + grid-area: tts_output; +} + +div.definitions { + grid-area: definitions; +} + +div.translations { + grid-area: translations; +} + +div.translation_button { + grid-area: translation_button; +} + +.wrap { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +#could_not_switch_languages_text { + color: red; +} + +.item { + max-width: 500px; + height: 200px; +} + +.language { + height: 50px; + margin: 0px 10px; +} + +.switch_languages { + height: 50px; + margin: 0px 5px; +} + +button { + font-size: 1rem; + padding: 4px 10px; + border: 2px solid #888888; +} + +input, +select, +textarea { + font-size: 1rem; + padding: 4px; + border: 2px solid #888888; +} + +textarea { + resize: vertical; + height: 5rem; + font-family: sans-serif; + width: 100%; +} + +input:focus, +select:focus, +textarea:focus, +button:focus { + border-color: #478061; + outline: 1px solid #478061; +} + + +body { + justify-content: center; + font-family: sans-serif; +} + +.def_type { + color: cyan; + text-transform: capitalize; +} + +.syn { + color: burlywood; +} + +.syn_type { + color: cyan; +} + +.use_in_sentence { + color: yellow; +} + +@media screen and (max-width: 1200px) { + + div.text_input, div.text_output{ + justify-content: center; + } + + form.the_grid { + display: grid; + width: 90vw; + grid-template-areas: + "translation_engines translation_engines" + "from_to_langs from_to_langs" + "text_input text_input" + "tts_input tts_input" + "text_output text_output" + "tts_output tts_output" + "translation_button translation_button" + "definitions definitions" + "translations translations"; + + } +} + +@media screen and (max-width: 600px) { + div.text_input { + width: 95%; + margin: auto; + } + + div.text_output { + width: 98%; + margin: auto; + } +} + +@media screen and (prefers-color-scheme: dark) { + body { + background-color: #212529; + color: #f8f9fa; + } + + #could_not_switch_languages_text { + color: #F13333; + } + + a:visited { + color: #9759f6; + text-decoration: none; + } + + a { + color: #599bf6; + text-decoration: none; + } + + input, + select, + button, + textarea { + background-color: #131618; + border-color: #495057; + color: #f8f9fa; + } +} \ No newline at end of file diff --git a/templates/google.html b/templates/google.html new file mode 100644 index 0000000..5e804e9 --- /dev/null +++ b/templates/google.html @@ -0,0 +1,228 @@ +<!doctype html> + +{% macro lang_option(lang_name, current_lang) %} + <option value="{{ lang_name }}" {{ 'selected' if current_lang == lang_name else '' }}>{{ lang_name }}</option> +{% endmacro %} + +{% macro supported_source_lang_options(current_lang) %} + {% for lang_name in supported_source_languages.keys() %} + {{ lang_option(lang_name, current_lang) }} + {% endfor %} +{% endmacro %} + +{% macro supported_target_lang_options(current_lang) %} + {% for lang_name in supported_target_languages.keys() %} + {{ lang_option(lang_name, current_lang) }} + {% endfor %} +{% endmacro %} + + +<html lang="en"> + <head> + <title>SimplyTranslate</title> + <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"> + <meta name="description" content="Experience simple and private Google translations"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta charset="UTF-8"> + <link rel="stylesheet" type="text/css" href= "{{ url_for('static',filename='styles/google.css') }}"> + </head> + + <body> + + <center> + <header><h1>SimplyTranslate</h1></header> + </center> + + + <form class="the_grid" action="/?engine={{ engine }}" method="POST" id="translation-form"> + + {% if engines|length > 1 %} + <div class="translation_engines"> + <center> + Translation Engine + {% for _engine in engines %} + <a style=" + {# Show the currently selected engine by underlining it #} + {% if engine == _engine.name %} + text-decoration: underline; + {% endif %} + " href="/?engine={{ _engine.name }}"> + {# These hyphens remove whitespace before/after the block. + They're here to remove the trailing space in the Google + engine link, which gets on yours truly's nerves. + I tried to put them just at the end only (i.e. `-%}`), + but it didn't work for whatever reason. + #} + + {{ _engine.display_name}} + </a> + + {% if not loop.last %} + | + {% endif %} + {% endfor %} + </center> + </div> + {% endif %} + + <div class="from_to_langs"> + <div class="wrap"> + <div class="language"> + {% if use_text_fields %} + <input type="text" id="from_language" name="from_language" aria-label="Source language" value="{{ from_l }}" placeholder="from" /> + {% else %} + <select name="from_language" id="from_language" aria-label="Source language"> + {{ supported_source_lang_options(from_l) }} + </select> + {% endif %} + </div> + + <div class="switch_languages"> + <button id="switchbutton" aria-label="Switch languages" formaction="/switchlanguages/?engine={{ engine }}" type="submit"><-></button> + </div> + + <div class="language"> + {% if use_text_fields %} + <input type="text" id="to_language" aria-label="Target language" name="to_language" value="{{ to_l }}" placeholder="from" /> + {% else %} + <select name="to_language" id="to_language" aria-label="Target language"> + {{ supported_target_lang_options(to_l) }} + </select> + {% endif %} + </div> + </div> + + {% if could_not_switch_languages %} + <center id="could_not_switch_languages_text"> + Sorry, {{ engine }} doesn't support switching from autodetect. + </center> + <br> + {% endif %} + </div> + <div class="text_input textarea"> + <textarea autofocus class="item" id="input" name="input" dir="auto" placeholder="Enter Text Here">{{ inp }}</textarea> + </div> + + <div class="text_output textarea"> + <textarea class="translation item" dir="auto" placeholder="Translation" readonly> + {%- if translation is not none -%}{{ translation["translated-text" ]}}{%- endif -%} + </textarea> + </div> + + {% if tts_enabled and tts_from is not none %} + <div class="tts_input"> + <center> + <audio controls> + <source type="audio/mpeg" src="{{ tts_from }}"> + </audio> + </center> + </div> + {% endif %} + + {% if tts_enabled and tts_to is not none %} + <div class="tts_output"> + <center> + <audio controls> + <source type="audio/mpeg" src="{{ tts_to }}"> + </audio> + </center> + </div> + {% endif %} + + {% if translation is not none and "definitions" in translation %} + <div class="definitions"> + <p> + {% for k in translation["definitions"] %} + <span class="def_type">{{k}}</span> + <ol> + {%for definition_item in translation["definitions"][k]%} + <li> + {{definition_item["definition"]}} + <br> + {% if "use-in-sentence" in definition_item %} + <span class="use_in_sentence"> + "{{definition_item["use-in-sentence"]}}" + </span> + <br> + {% endif %} + {% if "synonyms" in definition_item %} + {% for synonym_type in definition_item["synonyms"] %} + <span class="syn"> + {% if synonym_type != "" %} + <br> + <span class="syn_type">{{synonym_type}}: </span> + {% endif %} + {{", ".join(definition_item["synonyms"][synonym_type])}} + </span> + {% endfor %} + {% endif %} + </li> + <br> + {% endfor %} + </ol> + {%endfor%} + </p> + </div> + {% endif %} + + {% if translation is not none and "translations" in translation %} + <div class="translations"> + <p> + {%for k in translation["translations"]%} + <span class="def_type">{{k}}</span> + <ul> + {%for word in translation["translations"][k]%} + <li> + <span class="syn_type">{{word}}:</span> + <span class="syn">{{", ".join(translation["translations"][k][word]["words"])}}</span> + <span class="syn_type">{{translation["translations"][k][word]["frequency"]}}</span> + </li> + <br> + {%endfor%} + </ul> + <br> + {%endfor%} + </p> + </div> + {% endif %} + + <div class="translation_button"> + <center> + <!-- translate button --> + <button type="submit">Translate with {{ engine }}!</button> + + <br> + <br> + <!-- link to share translation --> + <a href="/?engine={{ engine }}&text={{ inp|urlencode }}&sl={{ from_l_code }}&tl={{ to_l_code }}"> + Copy this link to share this translation with others + </a> + </center> + </div> + + </form> + + <br> + <br> + <br> + + <footer> + <center> + <a href="/prefs">Preferences</a> + | + <a target="_new" href="https://simple-web.org/projects/simplytranslate.html">Project Page</a> + | + <a href="https://simple-web.org">Simple Web Project</a> + </center> + </footer> + + <script> + // this code submits the translation form when pressing Ctrl/Meta+Enter while focussed on the input text field + document.getElementById("input").addEventListener("keydown", function(event) { + if (event.keyCode === 13 && (event.metaKey || event.ctrlKey)) { + document.getElementById("translation-form").submit(); + } + }); + </script> + </body> +</html> diff --git a/templates/index.html b/templates/index.html index ecd836c..c1ee473 100644 --- a/templates/index.html +++ b/templates/index.html @@ -217,7 +217,7 @@ <div class="item-wrapper"> <textarea class="translation item" dir="auto" placeholder="Translation" readonly> - {%- if translation is not none -%}{{ translation }}{%- endif -%} + {%- if translation is not none -%}{%- if translation['translated-text'] is not none -%}{{ translation['translated-text'] }}{%- endif -%}{%- endif -%} </textarea> <!-- TTS for the output text --> {%- if tts_enabled and tts_to is not none -%} -- 2.25.1