~metalune/simplytranslate-devel

Adding Advanced GoogleTranslate v1 REJECTED

ManeraKai: 1
 Adding Advanced GoogleTranslate

 3 files changed, 481 insertions(+), 6 deletions(-)
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~metalune/simplytranslate-devel/patches/28730/mbox | git am -3
Learn more about email & git

simplytranslate_web: [PATCH] Adding Advanced GoogleTranslate Export this patch

From: ManeraKai <manerakai@protonmail.com>

---
 main.py                  |  59 ++++++++--
 static/styles/google.css | 200 ++++++++++++++++++++++++++++++++++
 templates/google.html    | 228 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 481 insertions(+), 6 deletions(-)
 create mode 100644 static/styles/google.css
 create mode 100644 templates/google.html

diff --git a/main.py b/main.py
index cfa9bb8..6a43550 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_advanced(text, from_language=from_language, to_language=to_language)

@app.route("/prefs", methods=["POST", "GET"])
async def prefs():
@@ -302,11 +329,26 @@ async def index():
    if not (inp == "" or inp.isspace()):
        from_l_code = to_lang_code(from_lang, engine)
        to_l_code = to_lang_code(to_lang, engine)
        translation = engine.translate(
            inp,
            to_language=to_l_code,
            from_language=from_l_code,
        )
        translation = None
        if engine_name == "google":
            translation =  translation = engine.translate_advanced(
                inp,
                to_language=to_l_code,
                from_language=from_l_code,
            )
            if "translated-text" not in translation:
                print("Reverting to old GoogleTranslate API")
                translation =  translation = engine.translate(
                    inp,
                    to_language=to_l_code,
                    from_language=from_l_code,
                )
        else:
            translation = engine.translate(
                inp,
                to_language=to_l_code,
                from_language=from_l_code,
            )

    # TTS
    tts_from = None
@@ -323,9 +365,14 @@ async def index():

    prefs = dict_to_prefs(request.cookies)

    html_template = "index.html"

    if engine_name == "google" and isinstance(translation, dict):
        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/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>
                &nbsp;|&nbsp;
                <a target="_new" href="https://simple-web.org/projects/simplytranslate.html">Project Page</a>
                &nbsp;|&nbsp;
                <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>
-- 
2.25.1