sábado, 6 de mayo de 2023

html table

<!DOCTYPE html>

<html>

<head>

<style>

* {

    /* Change your font family */

    font-family: sans-serif;

}


.content-table {

    border-collapse: collapse;

    margin: 25px 0;

    font-size: 0.9em;

    min-width: 400px;

    border-radius: 5px 5px 0 0;

    overflow: hidden;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);

}


.content-table thead tr {

    background-color: #009879;

    color: #ffffff;

    text-align: left;

    font-weight: bold;

}


.content-table th,

.content-table td {

    padding: 12px 15px;

}


.content-table tbody tr {

    border-bottom: 1px solid #dddddd;

}


.content-table tbody tr:nth-of-type(even) {

    background-color: #f3f3f3;

}


.content-table tbody tr:last-of-type {

    border-bottom: 2px solid #009879;

}


.content-table tbody tr.active-row {

    font-weight: bold;

    color: #009879;

}



</style>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>How to Style HTML Tables with CSS</title>

    <link rel="stylesheet" href="css/main.css">

</head>

<body>

    <table class="content-table">

        <thead>

          <tr>

            <th>Rank</th>

            <th>Name</th>

            <th>Points</th>

            <th>Team</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <td>1</td>

            <td>Domenic</td>

            <td>88,110</td>

            <td>dcode</td>

          </tr>

          <tr class="active-row">

            <td>2</td>

            <td>Sally</td>

            <td>72,400</td>

            <td>Students</td>

          </tr>

          <tr>

            <td>3</td>

            <td>Nick</td>

            <td>52,300</td>

            <td>dcode</td>

          </tr>

        </tbody>

      </table>

</body>

</html>


 https://dcode.domenade.com/tutorials/how-to-style-html-tables-with-css

Dashboarc code

 <!DOCTYPE html>

<html>

<head>

<style>

.grid-container {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  grid-gap: 20px;

}


.grid-item {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 150px;

  border-radius: 5px;

  box-shadow: 0 2px 4px rgba(0,0,0,.2);

  font-size: 4rem;

}


.red {

  background-color: #FF5252;

  color: white;

}


.blue {

  background-color: #2196F3;

  color: white;

}


.green {

  background-color: #4CAF50;

  color: white;

}


.yellow {

  background-color: #FFC107;

  color: white;

}


i {

  font-size: 1.5rem;

}


</style>

<title>Page Title</title>

</head>

<body>


<div class="grid-container">

  <div class="grid-item red">


    <i class="fas fa-phone">  Active</i>

  </div>

  <div class="grid-item blue">

    <i class="fas fa-phone"> ICC</i>

  </div>

  <div class="grid-item green">

    <i class="fas fa-phone">FFF</i>

  </div>

  <div class="grid-item yellow">

    <i class="fas fa-phone">DD</i>

  </div>

</div>



</body>

</html>


jueves, 27 de abril de 2023

gpt-3.5-turbo API

<?php

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, 'https://api.openai.com/v1/chat/completions');

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');

curl_setopt($ch, CURLOPT_HTTPHEADER, [

    'Authorization: Bearer $API_KEY',

    'Content-Type: application/json',

]);



$model="gpt-3.5-turbo";

curl_setopt($ch, CURLOPT_POSTFIELDS, "{\n \"model\": \"$model\",\n \"messages\": [{\"role\": \"user\", \"content\": \"$argv[1]\"}] \n }");


$response = curl_exec($ch);

 $object=json_decode($response);

$array = json_decode(json_encode($object), true);

//print_r($array);  //uncoment for details

echo $array['choices'][0]['message']['content'];

echo "\n";

curl_close($ch);


?>




curl https://api.openai.com/v1/chat/completions \

  -H "Content-Type: application/json" \

  -H "Authorization: Bearer $OPENAI_API_KEY" \

  -d '{

    "model": "gpt-3.5-turbo",

    "messages": [{"role": "user", "content": "Hello!"}]

  }'

https://platform.openai.com/docs/api-reference/chat/create

miércoles, 26 de abril de 2023

GPT Whisper OpenAI

<?php

$api_key="sk-dLwvC;


$audio_file="$argv[1]";


$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, 'https://api.openai.com/v1/audio/transcriptions');

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');

curl_setopt($ch, CURLOPT_HTTPHEADER, [

    "Authorization: Bearer $api_key",

    'Content-Type: multipart/form-data',

]);

curl_setopt($ch, CURLOPT_POSTFIELDS, [

    'file' => new CURLFile("$audio_file"),

    'model' => 'whisper-1',

]);


$response = curl_exec($ch);


$array = json_decode($response, true);

echo $array['text'];

curl_close($ch);

?>



 curl https://api.openai.com/v1/audio/transcriptions \

  -H "Authorization: Bearer MYAPIKEY" \

  -H "Content-Type: multipart/form-data" \

  -F file="@/home/ambiorixg12/Downloads/brussell-aportes-reg.mp3" \

  -F model="whisper-1"

openai audio/transcription

 curl https://api.openai.com/v1/audio/transcriptions \

  -H "Authorization: Bearer MYAPIKEY" \

  -H "Content-Type: multipart/form-data" \

  -F file="@/home/ambiorixg12/Downloads/brussell-aportes-reg.mp3" \

  -F model="whisper-1"

  

  

  

  curl https://api.openai.com/v1/audio/transcriptions   -H "Authorization: Bearer MYAPIKEY"   -H "Content-Type: multipart/form-data"  -s  -F file="@/home/ambiorixg12/Downloads/daury.mp3"   -F model="whisper-1"  | awk -F':"' '{print $2}' | awk -F'"}' '{print $1}'




var=$(curl https://api.openai.com/v1/audio/transcriptions   -H "Authorization: Bearer MYAPIKEY"   -H "Content-Type: multipart/form-data"  -s  -F file="@/home/ambiorixg12/Downloads/daury.mp3"   -F model="whisper-1"  | awk -F':"' '{print $2}' | awk -F'"}' '{print $1}')

sábado, 22 de abril de 2023

jueves, 9 de marzo de 2023

Update a select based on the values of other select


<script>

  function updateCities(country){

    var cities;

    if (country == 'Japan'){

      cities = ['Tokyo', 'Osaka', 'Kyoto'];

    } else if (country == 'USA'){

      cities = ['New York', 'Los Angeles', 'Chicago'];

    } else if (country == 'Australia'){

      cities = ['Sydney', 'Melbourne', 'Brisbane'];

    }

    

    // clear current city values

    document.getElementById('city').innerHTML = '';

        document.getElementById('city2').innerHTML = '';


    

    // add new city values

    for (var i = 0; i < cities.length; i++){

      var opt = document.createElement('option'); 

      opt.innerHTML = cities[i];

      opt.value = cities[i];

      document.getElementById('city').appendChild(opt);

    

    //

     var opt = document.createElement('option'); 

      opt.innerHTML = cities[i];

      opt.value = cities[i];

      document.getElementById('city2').appendChild(opt);

    

    //

    

    }

    

    

    

  }

</script>

<label>>


<select id="country" onchange="updateCities(this.value)">

  <option value="Japan">Japan</option>

  <option value="USA">USA</option>

  <option value="Australia">Australia</option>

</select>

<select id="city">

  <option value="none">- Select a City -</option>

</select>


<select id="city2">

  <option value="none">- Select a City2 -</option>

</select>