Spaces:

yasserrmd
/

webUIGen

Running

File size: 7,332 Bytes

<!DOCTYPE html>
<html>
<head>
  <title>WebGenUI - Web Page UI Generator</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  <style>
/* Style the form container */
.form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Style the form heading */
h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

/* Style the form icon */
.form-icon {
  margin-right: 10px;
}

/* Style the group headings */
h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Style the group icon */
.group-icon {
  margin-right: 5px;
}

/* Style the form fields */
.form-field {
  margin-bottom: 10px;
}

/* Style the form field labels */
.form-field label {
  font-weight: bold;
}

/* Style the form field inputs */
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
}

/* Style the form field checkboxes and radios */
.form-field input[type="checkbox"],
.form-field input[type="radio"] {
  margin-right: 5px;
}

/* Style the form field checkbox and radio labels */
.form-field label[for] {
  display: inline;
  font-weight: normal;
}

/* Style the form field error messages */
.form-field .error-message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

/* Style the form submit and cancel buttons */
.form-buttons {
  margin-top: 20px;
}

.form-buttons button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.form-buttons button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  margin-right: 10px;
}

.form-buttons button[type="reset"] {
  background-color: #f44336;
  color: white;
}

/* Use Bootstrap classes to style the form and group headings */
.form-container {
  border: none;
  box-shadow: none;
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 0.25rem;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
  border: none;
}

.form-field {
  margin-bottom: 1rem;
}

.form-field label {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.form-field input,
.form-field textarea,
.form-field select {
  border-radius: 0.25rem;
}

.form-buttons button {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.form-buttons button[type="submit"] {
  background-color: #007bff;
  border-color: #007bff;
}

.form-buttons button[type="reset"] {
  background-color: #dc3545;
  border-color: #dc3545;
}


  </style>
</head>
<body>
    <div class="container" style="margin-top: 50px;">
        <form id="messageForm">
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="messageInput" placeholder="Type your website details here...">
                 <!-- <textarea class="form-control" id="messageInput" placeholder="Type your message here..." rows="7"></textarea> -->
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="submit" id="sendButton">
                        <i id="buttonIcon" class="fas fa-paper-plane"></i>
                    </button>
                  <button id="downloadButton"><i class="fas fa-download"></i> Download HTML</button>
                </div>
            </div>
        </form>
    </div>

      <div class="container-fluid" id="htmlDiv">
        <div class=" embed-responsive-16by9">
    <iframe id="myIframe" class="embed-responsive-item" style="width: 100%;border: none;"></iframe>
  </div>
  </div>

      <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
      <script>
  //        document.getElementById('myIframe').onload = function() {
  //         document.getElementById('myIframe').style.height = document.getElementById('myIframe').contentWindow.document.body.scrollHeight + 'px';
  //         //document.getElementById('htmlDiv').style.height = document.getElementById('myIframe').contentWindow.document.body.scrollHeight  + 'px';
          
  // }

  var iframe = document.getElementById('myIframe');
  iframe.onload = function() {
    iframe.contentWindow.document.body.style.margin = '0';
    iframe.contentWindow.document.body.style.padding = '0';
    iframe.style.height = document.getElementById('myIframe').contentWindow.document.body.scrollHeight + 'px';
   
  }

document.getElementById('downloadButton').addEventListener('click', function() {
    var iframeDoc = document.getElementById('myIframe').contentWindow.document;
    if (iframeDoc.body.innerHTML.trim() !== '') {
        var html = iframeDoc.documentElement.outerHTML;
        var blob = new Blob([html], { type: 'text/html' });
        var url = URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = 'output.html';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    } else {
        alert('No content to download.');
    }
});

          $(document).ready(function() {
              $('#messageForm').on('submit', function(e) {
                  e.preventDefault();
                  var message = $('#messageInput').val();
                  var buttonIcon = $('#buttonIcon');
                  //$("#htmlPreview").html('');
                  // Change icon to loading spinner
                  document.getElementById('myIframe').srcdoc = '';
                  buttonIcon.removeClass('fa-paper-plane').addClass('fa-spinner fa-spin');
                  
                  $.ajax({
                      url: 'https://nakheeltech.com:8030/api/v1/prediction/9b2e5787-04ce-404c-981f-a69bbfce6035',
                      type: 'POST',
                      data: JSON.stringify({"question":  message }),
                      contentType: 'application/json',
                      success: function(data) {
                          // Change icon back to paper plane
                          $('#messageInput').val('');
                          var text=data.text
                          var startIndex = text.indexOf("<");
                            var endIndex = text.lastIndexOf(">") + 1;
                            var htmlString = text.substring(startIndex, endIndex);
                            document.getElementById('myIframe').srcdoc = htmlString;
                            //$("#htmlPreview").html(htmlString);
                          buttonIcon.removeClass('fa-spinner fa-spin').addClass('fa-paper-plane');
                          // Handle success here
                      },
                      error: function(jqXHR, textStatus, errorThrown) {
                          // Change icon back to paper plane
                          buttonIcon.removeClass('fa-spinner fa-spin').addClass('fa-paper-plane');
                          // Handle error here
                      }
                  });
              });
          });
      </script>

<!-- <div class="container" id="htmlPreview">

</div> -->
</body>
</html>