Hugging Face's logo

Spaces:
allknowingroger
/
Madewithwebsim
Running

App Files Community
Madewithwebsim
File size: 7,974 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
161
162
163
164
165
166
167
168
169
 
<html><head><base href="https://websim.ai/perspectives-ponderer"><title>Perspectives Ponderer: Weigh Pros and Cons with Depth</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
  @keyframes tilt {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
  }
  .scale-tilt {
    animation: tilt 5s infinite ease-in-out;
    transform-origin: center;
  }
</style>
</head>
<body class="bg-gradient-to-br from-teal-500 to-blue-600 text-gray-100 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-white">Perspectives Ponderer ⚖️</h1>
      <p class="mt-2 text-center text-teal-100">Weigh Pros and Cons with Depth</p>
    </div>
  </header>

  <main class="container mx-auto px-4 py-8">
    <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
      <h2 class="text-2xl font-semibold mb-4 text-teal-800">Ponder a Topic</h2>
      <form id="ponderer-form" method="GET" action="https://websim.ai/perspectives-ponderer" class="space-y-4">
        <div>
          <label for="topic-input" class="block text-sm font-medium text-gray-700">Your Topic:</label>
          <input type="text" id="topic-input" name="topic" class="mt-1 block w-full px-3 py-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-500 text-gray-900" placeholder="Enter a topic to analyze...">
        </div>
        <div>
          <label for="perspective-depth" class="block text-sm font-medium text-gray-700">Analysis Depth:</label>
          <select id="perspective-depth" name="depth" class="mt-1 block w-full px-3 py-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-500 text-gray-900">
            <option value="brief">Brief Overview</option>
            <option value="moderate">Moderate Analysis</option>
            <option value="in-depth">In-Depth Exploration</option>
          </select>
        </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-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">
            Ponder Perspectives 🤔
          </button>
        </div>
      </form>
    </div>

    <div id="result-container" class="bg-white rounded-lg shadow-lg p-6 hidden">
      <h2 class="text-2xl font-semibold mb-4 text-teal-800">Perspectives Analysis</h2>
      <div id="analysis-result" class="space-y-4">
        <!-- Analysis result will be inserted here -->
      </div>
    </div>

    <div class="mt-8 bg-white rounded-lg shadow-lg p-6">
      <h2 class="text-2xl font-semibold mb-4 text-teal-800">Critical Thinking Tips</h2>
      <ul class="list-disc list-inside space-y-2 text-gray-700">
        <li>Consider multiple viewpoints</li>
        <li>Look for evidence and data to support claims</li>
        <li>Identify potential biases</li>
        <li>Think about long-term consequences</li>
        <li>Question assumptions and challenge your own beliefs</li>
      </ul>
    </div>
  </main>

  <script>
    const pondererForm = document.getElementById('ponderer-form');
    const resultContainer = document.getElementById('result-container');
    const analysisResult = document.getElementById('analysis-result');

    pondererForm.addEventListener('submit', function(e) {
      e.preventDefault();
      const topic = document.getElementById('topic-input').value.trim();
      const depth = document.getElementById('perspective-depth').value;
      
      if (!topic) {
        alert('Please enter a topic to analyze.');
        return;
      }

      analyzeTopicPerspectives(topic, depth);
    });

    function analyzeTopicPerspectives(topic, depth) {
      // Show loading state
      resultContainer.classList.remove('hidden');
      analysisResult.innerHTML = '<div class="flex justify-center"><svg class="animate-spin h-10 w-10 text-teal-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></div>';

      // Simulate API call with setTimeout
      setTimeout(() => {
        const analysis = generateAnalysis(topic, depth);
        displayAnalysisResult(topic, analysis);
      }, 2000);
    }

    function generateAnalysis(topic, depth) {
      // This is a simplified analysis generator. In a real application, this would use more sophisticated NLP and reasoning models.
      const perspectives = {
        pros: [
          "Potential for positive impact",
          "Economic benefits",
          "Technological advancement",
          "Improved quality of life",
          "Enhanced social connections"
        ],
        cons: [
          "Potential negative consequences",
          "Ethical concerns",
          "Environmental impact",
          "Social inequalities",
          "Privacy and security risks"
        ]
      };

      const depthMultiplier = { brief: 2, moderate: 3, "in-depth": 5 };
      const numPoints = depthMultiplier[depth];

      return {
        pros: perspectives.pros.slice(0, numPoints).map(pro => ({ point: pro, details: generateDetails(pro, topic) })),
        cons: perspectives.cons.slice(0, numPoints).map(con => ({ point: con, details: generateDetails(con, topic) }))
      };
    }

    function generateDetails(point, topic) {
      // This function would ideally use more advanced language models to generate contextual details
      return `This aspect of ${topic} relates to ${point.toLowerCase()}. Further research and consideration of specific scenarios would be beneficial for a comprehensive understanding.`;
    }

    function displayAnalysisResult(topic, analysis) {
      let analysisHTML = `
        <h3 class="text-xl font-semibold text-teal-700 mb-4">Topic: ${topic}</h3>
        <div class="flex flex-col md:flex-row gap-6">
          <div class="flex-1">
            <h4 class="text-lg font-semibold text-green-600 mb-2">Pros:</h4>
            <ul class="list-disc list-inside space-y-4">
              ${analysis.pros.map(pro => `
                <li>
                  <span class="font-medium">${pro.point}</span>
                  <p class="ml-6 text-sm text-gray-600">${pro.details}</p>
                </li>
              `).join('')}
            </ul>
          </div>
          <div class="flex-1">
            <h4 class="text-lg font-semibold text-red-600 mb-2">Cons:</h4>
            <ul class="list-disc list-inside space-y-4">
              ${analysis.cons.map(con => `
                <li>
                  <span class="font-medium">${con.point}</span>
                  <p class="ml-6 text-sm text-gray-600">${con.details}</p>
                </li>
              `).join('')}
            </ul>
          </div>
        </div>
        <div class="mt-8 text-center">
          <svg class="w-24 h-24 mx-auto scale-tilt" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#0D9488" stroke-width="2"/>
            <path d="M7 12H17" stroke="#0D9488" stroke-width="2" stroke-linecap="round"/>
            <path d="M12 17V7" stroke="#0D9488" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <p class="mt-4 text-gray-700">Remember, this analysis is a starting point. Critical thinking and further research are encouraged for a comprehensive understanding.</p>
        </div>
      `;

      analysisResult.innerHTML = analysisHTML;
    }
  </script>
</body></html>