Hugging Face's logo

Spaces:
allknowingroger
/
Madewithwebsim
Running

App Files Community
Madewithwebsim
File size: 6,655 Bytes 
ad1dcd6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
 
<html><head><base href="https://websim.ai/csv-converter"><title>CSV Converter: Transform Data Formats with Ease</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
<style>
  @keyframes dataFlow {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }
  .data-flow {
    animation: dataFlow 1s ease-out;
  }
</style>
</head>
<body class="bg-gradient-to-br from-blue-900 to-teal-900 text-white min-h-screen font-sans">
  <header class="py-6 relative">
    <div class="container mx-auto px-4">
      <h1 class="text-4xl font-bold text-center text-blue-300">CSV Converter</h1>
      <p class="mt-2 text-center text-teal-200">Transform Data Formats with Ease</p>
    </div>
  </header>

  <main class="container mx-auto px-4 py-8">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
      <h2 class="text-2xl font-semibold mb-4 text-blue-300">Convert Your Data</h2>
      <form id="converter-form" class="space-y-4">
        <div>
          <label for="input-format" class="block text-sm font-medium text-teal-200">Input Format:</label>
          <select id="input-format" name="format" class="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-white">
            <option value="json">JSON</option>
            <option value="xml">XML</option>
            <option value="yaml">YAML</option>
          </select>
        </div>
        <div>
          <label for="input-data" class="block text-sm font-medium text-teal-200">Input Data:</label>
          <textarea id="input-data" name="data" rows="10" class="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-white font-mono" placeholder="Paste your data here..."></textarea>
        </div>
        <div>
          <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-900 bg-blue-500 hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Convert to CSV
          </button>
        </div>
      </form>
    </div>

    <div id="result-container" class="bg-gray-800 rounded-lg shadow-lg p-6 hidden">
      <h2 class="text-2xl font-semibold mb-4 text-blue-300">Converted CSV</h2>
      <div id="csv-result" class="space-y-4">
        <!-- Converted CSV will be inserted here -->
      </div>
      <div class="mt-4">
        <button id="download-csv" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-900 bg-teal-500 hover:bg-teal-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">
          Download CSV
        </button>
      </div>
    </div>

    <div class="mt-8 bg-gray-800 rounded-lg shadow-lg p-6">
      <h2 class="text-2xl font-semibold mb-4 text-blue-300">Supported Formats</h2>
      <ul class="list-disc list-inside space-y-2 text-teal-200">
        <li>JSON (JavaScript Object Notation)</li>
        <li>XML (eXtensible Markup Language)</li>
        <li>YAML (YAML Ain't Markup Language)</li>
      </ul>
    </div>
  </main>

  <script>
    const converterForm = document.getElementById('converter-form');
    const resultContainer = document.getElementById('result-container');
    const csvResult = document.getElementById('csv-result');
    const downloadButton = document.getElementById('download-csv');

    converterForm.addEventListener('submit', function(e) {
      e.preventDefault();
      const inputFormat = document.getElementById('input-format').value;
      const inputData = document.getElementById('input-data').value.trim();
      
      if (!inputData) {
        alert('Please provide input data to convert.');
        return;
      }

      convertToCSV(inputFormat, inputData);
    });

    function convertToCSV(format, data) {
      // Show loading state
      resultContainer.classList.remove('hidden');
      csvResult.innerHTML = '<p class="text-teal-200">Converting your data...</p>';

      // Simulate API call with setTimeout
      setTimeout(() => {
        let jsonData;
        try {
          switch (format) {
            case 'json':
              jsonData = JSON.parse(data);
              break;
            case 'xml':
              jsonData = convertXMLtoJSON(data);
              break;
            case 'yaml':
              jsonData = convertYAMLtoJSON(data);
              break;
            default:
              throw new Error('Unsupported format');
          }
          const csv = Papa.unparse(jsonData);
          displayCSVResult(csv);
        } catch (error) {
          displayError(error.message);
        }
      }, 1000);
    }

    function convertXMLtoJSON(xml) {
      // This is a placeholder function. In a real application, you would use a proper XML to JSON converter.
      return [{ "note": "XML conversion is not implemented in this demo" }];
    }

    function convertYAMLtoJSON(yaml) {
      // This is a placeholder function. In a real application, you would use a proper YAML to JSON converter.
      return [{ "note": "YAML conversion is not implemented in this demo" }];
    }

    function displayCSVResult(csv) {
      const csvLines = csv.split('\n').slice(0, 10); // Display first 10 lines
      let csvHTML = `
        <div class="space-y-4">
          <pre class="bg-gray-900 p-4 rounded-lg overflow-x-auto data-flow"><code class="text-teal-200 font-mono text-sm">${csvLines.join('\n')}</code></pre>
          ${csvLines.length < csv.split('\n').length ? '<p class="text-teal-300 text-sm">Showing first 10 lines...</p>' : ''}
        </div>
      `;

      csvResult.innerHTML = csvHTML;

      // Enable download button
      downloadButton.onclick = () => downloadCSV(csv);
    }

    function displayError(message) {
      csvResult.innerHTML = `<p class="text-red-500">Error: ${message}</p>`;
    }

    function downloadCSV(csv) {
      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement("a");
      if (link.download !== undefined) {
        const url = URL.createObjectURL(blob);
        link.setAttribute("href", url);
        link.setAttribute("download", "converted_data.csv");
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    }
  </script>
</body></html>