Question 290490 in Html Question posted in
Some basic documentation can be found here.

Create and download .py file by clicking HTML button

I am writing HTML and Javascript code for a chatbot. When the chatbot returns a python program, I want a download button to appear. When I click this Download button, I want to create a .py file from this output and download it.

The following is the code that I have written.

{% extends "layout.html" %}
{% block content %}

<!-- Begin page content -->
  <div class="overflow-auto">
    <br>
    <br>

    <div id="list-group" class="list-group w-auto">
      <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">                                                           
        <img src="https://digital-practice.ams3.cdn.digitaloceanspaces.com/static%2Fapp%2Fimg%2Fopenai-logo.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> 
        <div class="d-flex gap-2 w-100 justify-content-between">
          <div>
            <p class="mb-0 opacity-75">Hello. How may I help you?</p>
          </div>
        </div>
      </a>
    </div>
    <div class="input-group mb-3">
      <textarea id="chat-input" class="form-control custom-control" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
      <span id="gpt-button" class="input-group-asson btn btn-primary">Ask ChatGPT</span>
    </div>
  </div>

  <script>
    $("gpt_button").attr("disabled", true);
  </script>

  <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

  <script>

    $("#gpt-button").click(function(){
    chat();
    });

    $("#chat-input").keypress(function(event){  
    if(event.which==13){
        chat();
    }
    });

    function download(data){

    const blob = new Blob([data], {type:"application/x-python-code"});

    const href = URL.createObjectURL(blob);

    const a = Object.assign(document.createElement('a'), {href, style:"display:none", download: "program.py"});
    document.body.appendChild(a);

    a.click();
    URL.revokeObjectURL(href);
    a.remove();
    
    }
    
    function chat(){
    var question = $("#chat-input").val();
    console.log("Test");    
    $("#chat-input").val('');


    
    let html_data = '';
    html_data += `<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
        <img src="{{ url_for('static', filename='images/ai4eic-logo.png') }}" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
        <div class="d-flex gap-2 w-100 justify-content-between">
          <div>
            <p class="mb-0 opacity-75">${question}</p>
          </div>
        </div>
      </a>`;
    $("#chat-input").val('');
    $("#list-group").append(html_data);

    $.ajax({
        type: "POST",
        url: "/chat",
        data: {'prompt': question},
        success: function (data) {

        let gpt_data = '';
        gpt_data += `

               <style> 
                       p{word-break: break-all;
                         white-space:normal;} 

                       #download-button {
                         transition: opacity 1s;
                         opacity: 0;
                        }

                       #download-button.fadeIn {
                         opacity: 1;
                         }
                </style>       


           <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
                    <img src="https://digital-practice.ams3.cdn.digitaloceanspaces.com/static%2Fapp%2Fimg%2Fopenai-logo.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">  
                    <div class="d-flex gap-2 w-100 justify-content-between">
                      <div class="a">                                                           
                        <p class="mb-0 opacity-75">${data.answer}</p>    
                        <button onclick="download(${String(data.answer)})" type="button" disabled="${!(String(data.answer).includes("```python"))}" id="download-button" class="btn btn-primary ${String(data.answer).includes("```python") ? 'fadeIn' : ''}">Download Code</button>                
                      </div>                                                          
                    </div>                                                            
                  </a>`;
        $("#list-group").append(gpt_data);
        }
    });
    };

    </script>
 

{% endblock content %}

I am able to get the Download button to appear when the chatbot returns a python program. However, the code does not work after I have added the download function:

function download(data){

    const blob = new Blob([data], {type:"application/x-python-code"});

    const href = URL.createObjectURL(blob);

    const a = Object.assign(document.createElement('a'), {href, style:"display:none", download: "program.py"});
    document.body.appendChild(a);

    a.click();
    URL.revokeObjectURL(href);
    a.remove();
    
}

I want this to be triggered by the download button, which I have written as such

 <button onclick="download('${String(data.answer)}')" type="button" disabled="${!(String(data.answer).includes("```python"))}" id="download-button" class="btn btn-primary ${String(data.answer).includes("```python") ? 'fadeIn' : ''}">Download Code</button>
Tags:

2

Answers


  1. 0

    The problem is with disabled attribute: the button with onclick will always be disabled.

    Change it to not add true/false, but instead to not add the disabled attribute at all (values true/false don’t have effect on disabled, if attribute is present, it means the element will be disabled, however, adding true/false would work if set via DOM).

    Try this:

    instead of:

    disabled="${!(String(data.answer).includes("```python"))}"

    try (you can change the logic depending on when you want it to show/fade in):

    ${!(String(data.answer).includes("```python")) ? 'disabled=""' : ''}

    button part (also added quotes to function argument):

    <button onclick="download('${String(data.answer)}')" type="button" ${!(String(data.answer).includes("```python")) ? 'disabled=""' : ''} id="download-button" class="btn btn-primary ${String(data.answer).includes("```python") ? 'fadeIn' : ''}">Download Code</button>

    EDIT

    try replacing onclick with jQuery:

    • add id to the button
    <button id="my-btn" ...
    • add click handler, and pass data:
    function download(e){

const blob = new Blob([e.data], {type:"application/x-python-code"});

const href = URL.createObjectURL(blob);

const a = Object.assign(document.createElement('a'), {href, style:"display:none", download: "program.py"});
document.body.appendChild(a);

a.click();
URL.revokeObjectURL(href);
a.remove();

}
//...
$("#list-group").append(gpt_data);

$('#my-btn').click(String(data.answer), download);
    Login or Signup to reply.
  2. 0

    Download the Complete Source Code of Typing Game (Z-Type)
    https://www.buymeacoffee.com/luckydevelopers/e/173610

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search