| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Personalized Community Impact Predictor</title>
|
| <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
| <script src="https://cdn.tailwindcss.com"></script>
|
| <style>
|
| .glass {
|
| background: rgba(255, 255, 255, 0.85);
|
| backdrop-filter: blur(10px);
|
| border-radius: 20px;
|
| border: 1px solid rgba(255, 255, 255, 0.3);
|
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
|
| }
|
|
|
| .gradient-bg {
|
| background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 50%, #e8f5e8 100%);
|
| min-height: 100vh;
|
| }
|
|
|
| .action-card {
|
| transition: all 0.3s ease;
|
| cursor: pointer;
|
| background: rgba(255, 255, 255, 0.9);
|
| border: 2px solid rgba(102, 126, 234, 0.2);
|
| }
|
|
|
| .action-card:hover {
|
| transform: translateY(-5px);
|
| box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
| background: rgba(255, 255, 255, 0.95);
|
| }
|
|
|
| .action-card.selected {
|
| border: 3px solid #10b981;
|
| background: rgba(16, 185, 129, 0.1);
|
| }
|
|
|
| .custom-action-card {
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| color: white;
|
| border: 2px solid #667eea;
|
| }
|
|
|
| .custom-action-card:hover {
|
| background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
|
| }
|
|
|
| .custom-action-card.selected {
|
| border: 3px solid #10b981;
|
| background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
| }
|
|
|
| .personalization-form {
|
| background: rgba(255, 255, 255, 0.9);
|
| border-radius: 15px;
|
| padding: 1.5rem;
|
| margin: 1rem 0;
|
| border: 1px solid rgba(102, 126, 234, 0.2);
|
| }
|
|
|
| .ai-chat-bubble {
|
| background: linear-gradient(135deg, #667eea, #764ba2);
|
| color: white;
|
| padding: 1rem;
|
| border-radius: 15px;
|
| margin: 0.5rem 0;
|
| position: relative;
|
| }
|
|
|
| .ai-chat-bubble::before {
|
| content: "🤖";
|
| position: absolute;
|
| left: -10px;
|
| top: 10px;
|
| background: white;
|
| border-radius: 50%;
|
| width: 30px;
|
| height: 30px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-size: 16px;
|
| }
|
|
|
| .user-input-enhanced {
|
| background: rgba(255, 255, 255, 0.95);
|
| border: 2px solid rgba(102, 126, 234, 0.3);
|
| border-radius: 10px;
|
| padding: 0.75rem;
|
| transition: all 0.3s ease;
|
| color: #374151;
|
| }
|
|
|
| .user-input-enhanced:focus {
|
| border-color: #667eea;
|
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
| outline: none;
|
| }
|
|
|
| .progress-step {
|
| display: flex;
|
| align-items: center;
|
| margin: 0.5rem 0;
|
| }
|
|
|
| .progress-step.completed {
|
| color: #10b981;
|
| }
|
|
|
| .progress-step.active {
|
| color: #667eea;
|
| font-weight: bold;
|
| }
|
|
|
| .typing-indicator {
|
| display: inline-block;
|
| width: 8px;
|
| height: 8px;
|
| border-radius: 50%;
|
| background: currentColor;
|
| animation: typing 1.4s infinite ease-in-out;
|
| }
|
|
|
| .typing-indicator:nth-child(1) { animation-delay: -0.32s; }
|
| .typing-indicator:nth-child(2) { animation-delay: -0.16s; }
|
|
|
| @keyframes typing {
|
| 0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
|
| 40% { transform: scale(1); opacity: 1; }
|
| }
|
|
|
| .country-dropdown {
|
| max-height: 200px;
|
| overflow-y: auto;
|
| background: white;
|
| border: 1px solid #e5e7eb;
|
| border-radius: 8px;
|
| position: absolute;
|
| top: 100%;
|
| left: 0;
|
| right: 0;
|
| z-index: 50;
|
| box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
| }
|
|
|
| .country-option {
|
| padding: 0.75rem;
|
| cursor: pointer;
|
| border-bottom: 1px solid #f3f4f6;
|
| transition: background-color 0.2s;
|
| }
|
|
|
| .country-option:hover {
|
| background-color: #f9fafb;
|
| }
|
|
|
| .country-option:last-child {
|
| border-bottom: none;
|
| }
|
|
|
| .text-dark {
|
| color: #374151 !important;
|
| }
|
|
|
| .text-darker {
|
| color: #1f2937 !important;
|
| }
|
| </style>
|
| </head>
|
| <body class="gradient-bg">
|
| <div id="root"></div>
|
|
|
| <script type="text/babel">
|
| const { useState, useEffect, useCallback, useRef } = React;
|
|
|
|
|
| const COUNTRIES = [
|
| "Afghanistan", "Albania", "Algeria", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan",
|
| "Bahrain", "Bangladesh", "Belarus", "Belgium", "Bolivia", "Bosnia and Herzegovina", "Brazil", "Bulgaria",
|
| "Cambodia", "Canada", "Chile", "China", "Colombia", "Costa Rica", "Croatia", "Czech Republic",
|
| "Denmark", "Dominican Republic", "Ecuador", "Egypt", "Estonia", "Ethiopia", "Finland", "France",
|
| "Georgia", "Germany", "Ghana", "Greece", "Guatemala", "Honduras", "Hungary", "Iceland", "India",
|
| "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Japan", "Jordan", "Kazakhstan", "Kenya",
|
| "Kuwait", "Latvia", "Lebanon", "Lithuania", "Luxembourg", "Malaysia", "Mexico", "Morocco", "Netherlands",
|
| "New Zealand", "Nigeria", "Norway", "Pakistan", "Peru", "Philippines", "Poland", "Portugal", "Qatar",
|
| "Romania", "Russia", "Saudi Arabia", "Singapore", "Slovakia", "Slovenia", "South Africa", "South Korea",
|
| "Spain", "Sri Lanka", "Sweden", "Switzerland", "Thailand", "Turkey", "Ukraine", "United Arab Emirates",
|
| "United Kingdom", "United States", "Uruguay", "Venezuela", "Vietnam"
|
| ];
|
|
|
|
|
| const COMMUNITY_ACTIONS = {
|
| park: {
|
| title: "Park Redesign",
|
| description: "Redesign local community park with fitness areas and gardens",
|
| icon: "🌳",
|
| category: "Environment & Recreation",
|
| personalQuestions: [
|
| "What is the current condition of parks in your area?",
|
| "What specific improvements would benefit your community most?",
|
| "How often do you and your neighbors use local parks?",
|
| "What age groups in your community would benefit most from park improvements?",
|
| "Are there any cultural or accessibility considerations for your community?"
|
| ]
|
| },
|
| traffic: {
|
| title: "Traffic Policy",
|
| description: "Implement new traffic management and safety measures",
|
| icon: "🚦",
|
| category: "Transportation & Safety",
|
| personalQuestions: [
|
| "What are the main traffic issues in your neighborhood?",
|
| "Have you witnessed or experienced traffic-related problems?",
|
| "What times of day are traffic problems most severe in your area?",
|
| "How do current traffic conditions affect your daily life?",
|
| "What specific safety measures would you prioritize?"
|
| ]
|
| },
|
| recycling: {
|
| title: "Recycling Initiative",
|
| description: "Launch comprehensive community recycling program",
|
| icon: "♻️",
|
| category: "Environment & Sustainability",
|
| personalQuestions: [
|
| "What recycling facilities currently exist in your community?",
|
| "How does your family currently handle waste and recycling?",
|
| "What are the biggest waste management challenges you observe?",
|
| "How environmentally conscious is your community?",
|
| "What would motivate more people in your area to recycle?"
|
| ]
|
| },
|
| housing: {
|
| title: "Affordable Housing",
|
| description: "Develop affordable housing solutions for community",
|
| icon: "🏠",
|
| category: "Housing & Development",
|
| personalQuestions: [
|
| "What is the housing situation like in your community?",
|
| "Do you know people struggling with housing affordability?",
|
| "What types of housing are most needed in your area?",
|
| "How has housing availability changed in recent years?",
|
| "What would make housing more accessible for young people or families?"
|
| ]
|
| },
|
| education: {
|
| title: "Educational Program",
|
| description: "Create community education and skill development programs",
|
| icon: "📚",
|
| category: "Education & Learning",
|
| personalQuestions: [
|
| "What educational resources are available in your community?",
|
| "What skills or knowledge gaps do you see in your area?",
|
| "How could education programs benefit people of different ages?",
|
| "What subjects or skills are you personally interested in learning?",
|
| "How do people in your community typically access learning opportunities?"
|
| ]
|
| },
|
| health: {
|
| title: "Health Initiative",
|
| description: "Implement community health and wellness programs",
|
| icon: "❤️",
|
| category: "Health & Wellness",
|
| personalQuestions: [
|
| "What health challenges are common in your community?",
|
| "How accessible are healthcare services in your area?",
|
| "What wellness activities do people in your community enjoy?",
|
| "How has community health been affected by recent events?",
|
| "What would encourage more people to participate in health programs?"
|
| ]
|
| },
|
| business: {
|
| title: "Local Business Support",
|
| description: "Support and promote local business development",
|
| icon: "🏪",
|
| category: "Economic Development",
|
| personalQuestions: [
|
| "What types of local businesses exist in your community?",
|
| "How has the local economy been affected by recent changes?",
|
| "What businesses or services are missing from your area?",
|
| "How do you and your family support local businesses?",
|
| "What would help local businesses thrive in your community?"
|
| ]
|
| },
|
| safety: {
|
| title: "Community Safety",
|
| description: "Enhance community safety and security measures",
|
| icon: "🛡️",
|
| category: "Safety & Security",
|
| personalQuestions: [
|
| "How safe do you feel in your community during different times?",
|
| "What safety concerns are most important to address?",
|
| "How do community members currently look out for each other?",
|
| "What would make you feel safer in your neighborhood?",
|
| "How could technology or community programs improve safety?"
|
| ]
|
| }
|
| };
|
|
|
|
|
| const safeRender = (content) => {
|
| if (typeof content === 'string') {
|
| return content;
|
| }
|
| if (typeof content === 'object' && content !== null) {
|
| return JSON.stringify(content, null, 2);
|
| }
|
| return String(content);
|
| };
|
|
|
|
|
| const SafeAIContent = ({ content, title }) => {
|
| if (typeof content === 'string') {
|
| return React.createElement('div', { className: "text-white whitespace-pre-line" }, content);
|
| }
|
|
|
| if (Array.isArray(content)) {
|
| return React.createElement('div', { className: "space-y-2" },
|
| content.map((item, index) =>
|
| React.createElement('div', { key: index, className: "bg-white bg-opacity-20 rounded-lg p-3" },
|
| React.createElement(SafeAIContent, { content: item })
|
| )
|
| )
|
| );
|
| }
|
|
|
| if (typeof content === 'object' && content !== null) {
|
| return React.createElement('div', { className: "bg-white bg-opacity-20 rounded-lg p-3" },
|
| Object.entries(content).map(([key, value]) =>
|
| React.createElement('div', { key: key, className: "mb-2" },
|
| React.createElement('strong', { className: "text-white capitalize" }, key.replace(/_/g, ' ') + ':'),
|
| React.createElement('p', { className: "text-blue-100 mt-1" }, safeRender(value))
|
| )
|
| )
|
| );
|
| }
|
|
|
| return React.createElement('div', { className: "text-white" }, safeRender(content));
|
| };
|
|
|
|
|
| class ErrorBoundary extends React.Component {
|
| constructor(props) {
|
| super(props);
|
| this.state = { hasError: false, error: null, errorInfo: null };
|
| }
|
|
|
| static getDerivedStateFromError(error) {
|
| return { hasError: true };
|
| }
|
|
|
| componentDidCatch(error, errorInfo) {
|
| this.setState({ error, errorInfo });
|
| console.error("Uncaught error:", error, errorInfo);
|
| }
|
|
|
| render() {
|
| if (this.state.hasError) {
|
| return React.createElement('div', { className: "glass p-6 m-4 text-center" },
|
| React.createElement('h2', { className: "text-2xl font-bold text-red-600 mb-4" }, "🚨 Application Error"),
|
| React.createElement('p', { className: "text-darker mb-4" },
|
| "Something went wrong. Please try refreshing the page or starting a new prediction."
|
| ),
|
| React.createElement('button', {
|
| className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600",
|
| onClick: () => window.location.reload()
|
| }, "Refresh Page")
|
| );
|
| }
|
| return this.props.children;
|
| }
|
| }
|
|
|
|
|
| const CountrySelector = ({ value, onChange, placeholder = "Select your country..." }) => {
|
| const [isOpen, setIsOpen] = useState(false);
|
| const [searchTerm, setSearchTerm] = useState('');
|
| const dropdownRef = useRef(null);
|
|
|
| const filteredCountries = COUNTRIES.filter(country =>
|
| country.toLowerCase().includes(searchTerm.toLowerCase())
|
| );
|
|
|
| useEffect(() => {
|
| const handleClickOutside = (event) => {
|
| if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
| setIsOpen(false);
|
| }
|
| };
|
|
|
| document.addEventListener('mousedown', handleClickOutside);
|
| return () => document.removeEventListener('mousedown', handleClickOutside);
|
| }, []);
|
|
|
| const handleSelect = (country) => {
|
| onChange(country);
|
| setIsOpen(false);
|
| setSearchTerm('');
|
| };
|
|
|
| return React.createElement('div', { className: "relative", ref: dropdownRef },
|
| React.createElement('input', {
|
| type: "text",
|
| className: "user-input-enhanced w-full",
|
| placeholder: value || placeholder,
|
| value: searchTerm,
|
| onChange: (e) => setSearchTerm(e.target.value),
|
| onFocus: () => setIsOpen(true),
|
| autoComplete: "off"
|
| }),
|
| isOpen && React.createElement('div', { className: "country-dropdown" },
|
| filteredCountries.length > 0 ?
|
| filteredCountries.map(country =>
|
| React.createElement('div', {
|
| key: country,
|
| className: "country-option text-darker",
|
| onClick: () => handleSelect(country)
|
| }, country)
|
| ) :
|
| React.createElement('div', { className: "country-option text-gray-500" }, "No countries found")
|
| )
|
| );
|
| };
|
|
|
|
|
| const CommunityImpactPredictor = () => {
|
| const [currentPhase, setCurrentPhase] = useState(0);
|
| const [selectedAction, setSelectedAction] = useState('');
|
| const [customAction, setCustomAction] = useState({
|
| title: '',
|
| description: '',
|
| category: ''
|
| });
|
| const [isCustomAction, setIsCustomAction] = useState(false);
|
| const [personalContext, setPersonalContext] = useState({
|
| ageRange: '',
|
| country: '',
|
| city: '',
|
| communityType: '',
|
| role: '',
|
| interests: '',
|
| experience: '',
|
| goals: ''
|
| });
|
| const [personalizationAnswers, setPersonalizationAnswers] = useState({});
|
| const [aiInsights, setAiInsights] = useState(null);
|
| const [isLoading, setIsLoading] = useState(false);
|
| const [apiKey, setApiKey] = useState('');
|
| const [error, setError] = useState('');
|
|
|
|
|
| const renderPersonalContextPhase = () => {
|
| return React.createElement('div', { className: "glass p-8 max-w-4xl mx-auto" },
|
| React.createElement('h2', { className: "text-3xl font-bold text-darker mb-6 text-center" },
|
| "🌟 Personal Context & Background"
|
| ),
|
| React.createElement('p', { className: "text-dark mb-6 text-center" },
|
| "Help us understand your unique perspective and community context for personalized analysis."
|
| ),
|
|
|
| React.createElement('div', { className: "grid md:grid-cols-2 gap-6" },
|
|
|
| React.createElement('div', null,
|
| React.createElement('label', { className: "block text-darker font-semibold mb-2" }, "Age Range"),
|
| React.createElement('select', {
|
| className: "user-input-enhanced w-full",
|
| value: personalContext.ageRange,
|
| onChange: (e) => setPersonalContext({...personalContext, ageRange: e.target.value})
|
| },
|
| React.createElement('option', { value: "" }, "Select your age range..."),
|
| React.createElement('option', { value: "13-17" }, "13-17 years"),
|
| React.createElement('option', { value: "18-24" }, "18-24 years"),
|
| React.createElement('option', { value: "25-34" }, "25-34 years"),
|
| React.createElement('option', { value: "35-44" }, "35-44 years"),
|
| React.createElement('option', { value: "45-54" }, "45-54 years"),
|
| React.createElement('option', { value: "55+" }, "55+ years")
|
| )
|
| ),
|
|
|
|
|
| React.createElement('div', null,
|
| React.createElement('label', { className: "block text-darker font-semibold mb-2" }, "Country"),
|
| React.createElement(CountrySelector, {
|
| value: personalContext.country,
|
| onChange: (country) => setPersonalContext({...personalContext, country})
|
| })
|
| ),
|
|
|
|
|
| React.createElement('div', null,
|
| React.createElement('label', { className: "block text-darker font-semibold mb-2" }, "City/Town"),
|
| React.createElement('input', {
|
| type: "text",
|
| className: "user-input-enhanced w-full",
|
| placeholder: "Enter your city or town...",
|
| value: personalContext.city,
|
| onChange: (e) => setPersonalContext({...personalContext, city: e.target.value})
|
| })
|
| ),
|
|
|
|
|
| React.createElement('div', null,
|
| React.createElement('label', { className: "block text-darker font-semibold mb-2" }, "Community Type"),
|
| React.createElement('select', {
|
| className: "user-input-enhanced w-full",
|
| value: personalContext.communityType,
|
| onChange: (e) => setPersonalContext({...personalContext, communityType: e.target.value})
|
| },
|
| React.createElement('option', { value: "" }, "Select community type..."),
|
| React.createElement('option', { value: "Urban" }, "Urban (City center)"),
|
| React.createElement('option', { value: "Suburban" }, "Suburban (Residential area)"),
|
| React.createElement('option', { value: "Rural" }, "Rural (Countryside)"),
|
| React.createElement('option', { value: "Small Town" }, "Small Town"),
|
| React.createElement('option', { value: "Village" }, "Village")
|
| )
|
| ),
|
|
|
|
|
| React.createElement('div', null,
|
| React.createElement('label', { className: "block text-darker font-semibold mb-2" }, "Your Role"),
|
| React.createElement('select', {
|
| className: "user-input-enhanced w-full",
|
| value: personalContext.role,
|
| onChange: (e) => setPersonalContext({...personalContext, role: e.target.value})
|
| },
|
| React.createElement('option', { value: "" }, "Select your role..."),
|
| React.createElement('option', { value: "Student" }, "Student"),
|
| React.createElement('option', { value: "Teacher/Educator" }, "Teacher/Educator"),
|
| React.createElement('option', { value: "Community Member" }, "Community Member"),
|
| React.createElement('option', { value: "Local Leader" }, "Local Leader"),
|
| React.createElement('option', { value: "Volunteer" }, "Volunteer"),
|
| React.createElement('option', { value: "Professional" }, "Professional"),
|
| React.createElement('option', { value: "Other" }, "Other")
|
| )
|
| ),
|
|
|
|
|
| React.createElement('div', null,
|
| React.createElement('label', { className: "block text-darker font-semibold mb-2" }, "Interests & Passions"),
|
| React.createElement('textarea', {
|
| className: "user-input-enhanced w-full h-20",
|
| placeholder: "What causes, hobbies, or topics are you passionate about?",
|
| value: personalContext.interests,
|
| onChange: (e) => setPersonalContext({...personalContext, interests: e.target.value})
|
| })
|
| )
|
| ),
|
|
|
| React.createElement('div', { className: "mt-6" },
|
|
|
| React.createElement('div', { className: "mb-4" },
|
| React.createElement('label', { className: "block text-darker font-semibold mb-2" }, "Community Experience"),
|
| React.createElement('textarea', {
|
| className: "user-input-enhanced w-full h-20",
|
| placeholder: "Describe any previous community involvement, volunteering, or leadership experience...",
|
| value: personalContext.experience,
|
| onChange: (e) => setPersonalContext({...personalContext, experience: e.target.value})
|
| })
|
| ),
|
|
|
|
|
| React.createElement('div', { className: "mb-6" },
|
| React.createElement('label', { className: "block text-darker font-semibold mb-2" }, "Goals & Aspirations"),
|
| React.createElement('textarea', {
|
| className: "user-input-enhanced w-full h-20",
|
| placeholder: "What do you hope to achieve through community engagement? What impact do you want to make?",
|
| value: personalContext.goals,
|
| onChange: (e) => setPersonalContext({...personalContext, goals: e.target.value})
|
| })
|
| )
|
| ),
|
|
|
| React.createElement('div', { className: "text-center" },
|
| React.createElement('button', {
|
| className: "bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-blue-600 hover:to-purple-700 transition-all duration-300 disabled:opacity-50",
|
| onClick: () => setCurrentPhase(1),
|
| disabled: !personalContext.ageRange || !personalContext.country || !personalContext.city || !personalContext.communityType
|
| }, "Continue to Action Selection →")
|
| )
|
| );
|
| };
|
|
|
|
|
| const renderActionSelectionPhase = () => {
|
| return React.createElement('div', { className: "glass p-8 max-w-6xl mx-auto" },
|
| React.createElement('h2', { className: "text-3xl font-bold text-darker mb-6 text-center" },
|
| "🎯 Select Community Action"
|
| ),
|
| React.createElement('p', { className: "text-dark mb-6 text-center" },
|
| "Choose a community action to analyze, or create your own custom initiative."
|
| ),
|
|
|
|
|
| React.createElement('div', { className: "grid md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8" },
|
| Object.entries(COMMUNITY_ACTIONS).map(([key, action]) =>
|
| React.createElement('div', {
|
| key: key,
|
| className: `action-card p-4 rounded-lg text-center ${selectedAction === key && !isCustomAction ? 'selected' : ''}`,
|
| onClick: () => {
|
| setSelectedAction(key);
|
| setIsCustomAction(false);
|
| setCustomAction({ title: '', description: '', category: '' });
|
| }
|
| },
|
| React.createElement('div', { className: "text-4xl mb-2" }, action.icon),
|
| React.createElement('h3', { className: "font-bold text-darker mb-1" }, action.title),
|
| React.createElement('p', { className: "text-sm text-dark mb-2" }, action.description),
|
| React.createElement('span', { className: "text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full" }, action.category)
|
| )
|
| )
|
| ),
|
|
|
|
|
| React.createElement('div', { className: "mb-6" },
|
| React.createElement('div', {
|
| className: `custom-action-card action-card p-6 rounded-lg text-center cursor-pointer ${isCustomAction ? 'selected' : ''}`,
|
| onClick: () => {
|
| setIsCustomAction(true);
|
| setSelectedAction('');
|
| }
|
| },
|
| React.createElement('div', { className: "text-4xl mb-2" }, "✨"),
|
| React.createElement('h3', { className: "font-bold mb-2" }, "Create Custom Action"),
|
| React.createElement('p', { className: "text-sm opacity-90" }, "Design your own community initiative")
|
| )
|
| ),
|
|
|
|
|
| isCustomAction && React.createElement('div', { className: "personalization-form mb-6" },
|
| React.createElement('h4', { className: "text-xl font-bold text-darker mb-4" }, "🛠️ Design Your Custom Action"),
|
| React.createElement('div', { className: "grid md:grid-cols-2 gap-4 mb-4" },
|
| React.createElement('div', null,
|
| React.createElement('label', { className: "block text-darker font-semibold mb-2" }, "Action Title"),
|
| React.createElement('input', {
|
| type: "text",
|
| className: "user-input-enhanced w-full",
|
| placeholder: "e.g., Community Garden Project",
|
| value: customAction.title,
|
| onChange: (e) => setCustomAction({...customAction, title: e.target.value})
|
| })
|
| ),
|
| React.createElement('div', null,
|
| React.createElement('label', { className: "block text-darker font-semibold mb-2" }, "Category"),
|
| React.createElement('input', {
|
| type: "text",
|
| className: "user-input-enhanced w-full",
|
| placeholder: "e.g., Environment & Sustainability",
|
| value: customAction.category,
|
| onChange: (e) => setCustomAction({...customAction, category: e.target.value})
|
| })
|
| )
|
| ),
|
| React.createElement('div', null,
|
| React.createElement('label', { className: "block text-darker font-semibold mb-2" }, "Description"),
|
| React.createElement('textarea', {
|
| className: "user-input-enhanced w-full h-24",
|
| placeholder: "Describe your community action idea in detail...",
|
| value: customAction.description,
|
| onChange: (e) => setCustomAction({...customAction, description: e.target.value})
|
| })
|
| )
|
| ),
|
|
|
| React.createElement('div', { className: "flex justify-between" },
|
| React.createElement('button', {
|
| className: "bg-gray-500 text-white px-6 py-2 rounded-lg hover:bg-gray-600 transition-colors",
|
| onClick: () => setCurrentPhase(0)
|
| }, "← Back"),
|
| React.createElement('button', {
|
| className: "bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-blue-600 hover:to-purple-700 transition-all duration-300 disabled:opacity-50",
|
| onClick: () => setCurrentPhase(2),
|
| disabled: !selectedAction && (!isCustomAction || !customAction.title || !customAction.description)
|
| }, "Continue to Personalization →")
|
| )
|
| );
|
| };
|
|
|
|
|
| const renderPersonalizationPhase = () => {
|
| const currentAction = isCustomAction ? customAction : COMMUNITY_ACTIONS[selectedAction];
|
| const questions = isCustomAction ? [
|
| "Why is this action important to your community?",
|
| "What specific challenges does this action address in your area?",
|
| "How would this action benefit different groups in your community?",
|
| "What resources or support would be needed to implement this?",
|
| "How does this action align with your personal interests and goals?"
|
| ] : currentAction.personalQuestions;
|
|
|
| return React.createElement('div', { className: "glass p-8 max-w-4xl mx-auto" },
|
| React.createElement('h2', { className: "text-3xl font-bold text-darker mb-6 text-center" },
|
| "🤔 Personalization Questions"
|
| ),
|
| React.createElement('div', { className: "bg-blue-50 p-4 rounded-lg mb-6" },
|
| React.createElement('h3', { className: "text-xl font-bold text-darker mb-2" },
|
| `${currentAction.icon || '✨'} ${currentAction.title}`
|
| ),
|
| React.createElement('p', { className: "text-dark" }, currentAction.description),
|
| currentAction.category && React.createElement('span', {
|
| className: "inline-block mt-2 text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full"
|
| }, currentAction.category)
|
| ),
|
|
|
| React.createElement('div', { className: "space-y-6" },
|
| questions.map((question, index) =>
|
| React.createElement('div', { key: index, className: "personalization-form" },
|
| React.createElement('label', { className: "block text-darker font-semibold mb-3" },
|
| `${index + 1}. ${question}`
|
| ),
|
| React.createElement('textarea', {
|
| className: "user-input-enhanced w-full h-24",
|
| placeholder: "Share your thoughts and experiences...",
|
| value: personalizationAnswers[index] || '',
|
| onChange: (e) => setPersonalizationAnswers({
|
| ...personalizationAnswers,
|
| [index]: e.target.value
|
| })
|
| })
|
| )
|
| )
|
| ),
|
|
|
| React.createElement('div', { className: "flex justify-between mt-8" },
|
| React.createElement('button', {
|
| className: "bg-gray-500 text-white px-6 py-2 rounded-lg hover:bg-gray-600 transition-colors",
|
| onClick: () => setCurrentPhase(1)
|
| }, "← Back"),
|
| React.createElement('button', {
|
| className: "bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-blue-600 hover:to-purple-700 transition-all duration-300 disabled:opacity-50",
|
| onClick: () => setCurrentPhase(3),
|
| disabled: Object.keys(personalizationAnswers).length < questions.length ||
|
| Object.values(personalizationAnswers).some(answer => !answer.trim())
|
| }, "Continue to AI Analysis →")
|
| )
|
| );
|
| };
|
|
|
|
|
| const renderAIAnalysisSetup = () => {
|
| return React.createElement('div', { className: "glass p-8 max-w-4xl mx-auto" },
|
| React.createElement('h2', { className: "text-3xl font-bold text-darker mb-6 text-center" },
|
| "🤖 AI Impact Analysis"
|
| ),
|
| React.createElement('p', { className: "text-dark mb-6 text-center" },
|
| "Provide your OpenAI API key to generate personalized community impact predictions."
|
| ),
|
|
|
| React.createElement('div', { className: "personalization-form mb-6" },
|
| React.createElement('label', { className: "block text-darker font-semibold mb-2" }, "OpenAI API Key"),
|
| React.createElement('input', {
|
| type: "password",
|
| className: "user-input-enhanced w-full",
|
| placeholder: "Enter your OpenAI API key...",
|
| value: apiKey,
|
| onChange: (e) => setApiKey(e.target.value)
|
| }),
|
| React.createElement('p', { className: "text-sm text-dark mt-2" },
|
| "Your API key is stored locally and never transmitted to external servers."
|
| )
|
| ),
|
|
|
| error && React.createElement('div', { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4" },
|
| error
|
| ),
|
|
|
| React.createElement('div', { className: "flex justify-between" },
|
| React.createElement('button', {
|
| className: "bg-gray-500 text-white px-6 py-2 rounded-lg hover:bg-gray-600 transition-colors",
|
| onClick: () => setCurrentPhase(2)
|
| }, "← Back"),
|
| React.createElement('button', {
|
| className: "bg-gradient-to-r from-green-500 to-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-green-600 hover:to-blue-700 transition-all duration-300 disabled:opacity-50",
|
| onClick: generateAIInsights,
|
| disabled: !apiKey || isLoading
|
| }, isLoading ? "Generating Analysis..." : "Generate AI Analysis 🚀")
|
| )
|
| );
|
| };
|
|
|
|
|
| const generateAIInsights = async () => {
|
| setIsLoading(true);
|
| setError('');
|
|
|
| try {
|
| const currentAction = isCustomAction ? customAction : COMMUNITY_ACTIONS[selectedAction];
|
|
|
| const prompt = `As an expert community development analyst, provide a comprehensive impact analysis for the following community action:
|
|
|
| Action: ${currentAction.title}
|
| Description: ${currentAction.description}
|
| Category: ${currentAction.category || 'Community Development'}
|
|
|
| Personal Context:
|
| - Age Range: ${personalContext.ageRange}
|
| - Location: ${personalContext.city}, ${personalContext.country}
|
| - Community Type: ${personalContext.communityType}
|
| - Role: ${personalContext.role}
|
| - Interests: ${personalContext.interests}
|
| - Experience: ${personalContext.experience}
|
| - Goals: ${personalContext.goals}
|
|
|
| Personalization Responses:
|
| ${Object.entries(personalizationAnswers).map(([index, answer]) => `${parseInt(index) + 1}. ${answer}`).join('\n')}
|
|
|
| Please provide a detailed analysis in the following JSON format:
|
| {
|
| "overview": "Comprehensive overview of the action's potential impact",
|
| "shortTermImpacts": ["impact1", "impact2", "impact3"],
|
| "mediumTermImpacts": ["impact1", "impact2", "impact3"],
|
| "longTermImpacts": ["impact1", "impact2", "impact3"],
|
| "challenges": ["challenge1", "challenge2", "challenge3"],
|
| "successFactors": ["factor1", "factor2", "factor3"],
|
| "stakeholders": ["stakeholder1", "stakeholder2", "stakeholder3"],
|
| "resources": ["resource1", "resource2", "resource3"],
|
| "personalizedRecommendations": "Specific recommendations based on their context and responses",
|
| "globalExamples": [
|
| {
|
| "location": "City, Country",
|
| "description": "Brief description of similar successful initiative",
|
| "outcome": "Key outcomes achieved"
|
| }
|
| ]
|
| }
|
|
|
| Ensure the analysis is specific to their location (${personalContext.city}, ${personalContext.country}) and considers their personal context and responses.`;
|
|
|
| const response = await fetch('https://api.openai.com/v1/chat/completions', {
|
| method: 'POST',
|
| headers: {
|
| 'Content-Type': 'application/json',
|
| 'Authorization': `Bearer ${apiKey}`
|
| },
|
| body: JSON.stringify({
|
| model: 'gpt-4o-mini',
|
| messages: [
|
| {
|
| role: 'system',
|
| content: 'You are an expert community development analyst providing detailed, actionable insights for community initiatives. Always respond with valid JSON format.'
|
| },
|
| {
|
| role: 'user',
|
| content: prompt
|
| }
|
| ],
|
| max_tokens: 2000,
|
| temperature: 0.7
|
| })
|
| });
|
|
|
| if (!response.ok) {
|
| throw new Error(`API Error: ${response.status} ${response.statusText}`);
|
| }
|
|
|
| const data = await response.json();
|
| const aiResponse = data.choices[0].message.content;
|
|
|
|
|
| let insights;
|
| try {
|
| const jsonMatch = aiResponse.match(/\{[\s\S]*\}/);
|
| if (jsonMatch) {
|
| insights = JSON.parse(jsonMatch[0]);
|
| } else {
|
| throw new Error("No JSON found in response");
|
| }
|
| } catch (parseError) {
|
| console.error("JSON parsing error:", parseError);
|
|
|
| insights = {
|
| overview: aiResponse,
|
| shortTermImpacts: ["Analysis provided in overview"],
|
| mediumTermImpacts: ["Analysis provided in overview"],
|
| longTermImpacts: ["Analysis provided in overview"],
|
| challenges: ["See overview for details"],
|
| successFactors: ["See overview for details"],
|
| stakeholders: ["Community members", "Local government", "Organizations"],
|
| resources: ["Community support", "Funding", "Volunteers"],
|
| personalizedRecommendations: "See overview for personalized insights",
|
| globalExamples: []
|
| };
|
| }
|
|
|
| setAiInsights(insights);
|
| setCurrentPhase(4);
|
|
|
| } catch (error) {
|
| console.error('Error generating AI insights:', error);
|
| setError(`Failed to generate analysis: ${error.message}`);
|
| } finally {
|
| setIsLoading(false);
|
| }
|
| };
|
|
|
|
|
| const renderAIResults = () => {
|
| if (!aiInsights) return null;
|
|
|
| const currentAction = isCustomAction ? customAction : COMMUNITY_ACTIONS[selectedAction];
|
|
|
| return React.createElement('div', { className: "glass p-8 max-w-6xl mx-auto" },
|
| React.createElement('h2', { className: "text-3xl font-bold text-darker mb-6 text-center" },
|
| "📊 AI Impact Analysis Results"
|
| ),
|
|
|
|
|
| React.createElement('div', { className: "bg-blue-50 p-4 rounded-lg mb-6" },
|
| React.createElement('h3', { className: "text-xl font-bold text-darker mb-2" },
|
| `${currentAction.icon || '✨'} ${currentAction.title}`
|
| ),
|
| React.createElement('p', { className: "text-dark mb-2" }, currentAction.description),
|
| React.createElement('p', { className: "text-sm text-dark" },
|
| `Analysis for: ${personalContext.city}, ${personalContext.country} (${personalContext.communityType})`
|
| )
|
| ),
|
|
|
|
|
| React.createElement('div', { className: "ai-chat-bubble mb-6" },
|
| React.createElement('h4', { className: "text-lg font-bold mb-3" }, "🎯 Overview"),
|
| React.createElement(SafeAIContent, { content: aiInsights.overview })
|
| ),
|
|
|
|
|
| React.createElement('div', { className: "grid md:grid-cols-3 gap-4 mb-6" },
|
| React.createElement('div', { className: "ai-chat-bubble" },
|
| React.createElement('h4', { className: "text-lg font-bold mb-3" }, "📅 Short-term (1-6 months)"),
|
| React.createElement(SafeAIContent, { content: aiInsights.shortTermImpacts })
|
| ),
|
| React.createElement('div', { className: "ai-chat-bubble" },
|
| React.createElement('h4', { className: "text-lg font-bold mb-3" }, "📈 Medium-term (6-18 months)"),
|
| React.createElement(SafeAIContent, { content: aiInsights.mediumTermImpacts })
|
| ),
|
| React.createElement('div', { className: "ai-chat-bubble" },
|
| React.createElement('h4', { className: "text-lg font-bold mb-3" }, "🌟 Long-term (18+ months)"),
|
| React.createElement(SafeAIContent, { content: aiInsights.longTermImpacts })
|
| )
|
| ),
|
|
|
|
|
| React.createElement('div', { className: "grid md:grid-cols-2 gap-4 mb-6" },
|
| React.createElement('div', { className: "ai-chat-bubble" },
|
| React.createElement('h4', { className: "text-lg font-bold mb-3" }, "⚠️ Challenges"),
|
| React.createElement(SafeAIContent, { content: aiInsights.challenges })
|
| ),
|
| React.createElement('div', { className: "ai-chat-bubble" },
|
| React.createElement('h4', { className: "text-lg font-bold mb-3" }, "✅ Success Factors"),
|
| React.createElement(SafeAIContent, { content: aiInsights.successFactors })
|
| )
|
| ),
|
|
|
|
|
| React.createElement('div', { className: "grid md:grid-cols-2 gap-4 mb-6" },
|
| React.createElement('div', { className: "ai-chat-bubble" },
|
| React.createElement('h4', { className: "text-lg font-bold mb-3" }, "👥 Key Stakeholders"),
|
| React.createElement(SafeAIContent, { content: aiInsights.stakeholders })
|
| ),
|
| React.createElement('div', { className: "ai-chat-bubble" },
|
| React.createElement('h4', { className: "text-lg font-bold mb-3" }, "🛠️ Required Resources"),
|
| React.createElement(SafeAIContent, { content: aiInsights.resources })
|
| )
|
| ),
|
|
|
|
|
| React.createElement('div', { className: "ai-chat-bubble mb-6" },
|
| React.createElement('h4', { className: "text-lg font-bold mb-3" }, "💡 Personalized Recommendations"),
|
| React.createElement(SafeAIContent, { content: aiInsights.personalizedRecommendations })
|
| ),
|
|
|
|
|
| aiInsights.globalExamples && aiInsights.globalExamples.length > 0 &&
|
| React.createElement('div', { className: "ai-chat-bubble mb-6" },
|
| React.createElement('h4', { className: "text-lg font-bold mb-3" }, "🌍 Global Examples"),
|
| React.createElement(SafeAIContent, { content: aiInsights.globalExamples })
|
| ),
|
|
|
| React.createElement('div', { className: "text-center" },
|
| React.createElement('button', {
|
| className: "bg-gradient-to-r from-green-500 to-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-green-600 hover:to-blue-700 transition-all duration-300 mr-4",
|
| onClick: () => {
|
| setCurrentPhase(0);
|
| setSelectedAction('');
|
| setIsCustomAction(false);
|
| setCustomAction({ title: '', description: '', category: '' });
|
| setPersonalizationAnswers({});
|
| setAiInsights(null);
|
| setPersonalContext({
|
| ageRange: '',
|
| country: '',
|
| city: '',
|
| communityType: '',
|
| role: '',
|
| interests: '',
|
| experience: '',
|
| goals: ''
|
| });
|
| }
|
| }, "🔄 Start New Analysis"),
|
| React.createElement('button', {
|
| className: "bg-gray-500 text-white px-6 py-2 rounded-lg hover:bg-gray-600 transition-colors",
|
| onClick: () => setCurrentPhase(3)
|
| }, "← Back to Setup")
|
| )
|
| );
|
| };
|
|
|
|
|
| return React.createElement('div', { className: "min-h-screen p-4" },
|
| React.createElement('div', { className: "max-w-7xl mx-auto" },
|
| React.createElement('header', { className: "text-center mb-8" },
|
| React.createElement('h1', { className: "text-4xl font-bold text-darker mb-2" },
|
| "🏘️ Community Impact Predictor"
|
| ),
|
| React.createElement('p', { className: "text-dark text-lg" },
|
| "Analyze and predict the impact of community actions with AI-powered insights"
|
| )
|
| ),
|
|
|
|
|
| React.createElement('div', { className: "glass p-4 mb-6 max-w-4xl mx-auto" },
|
| React.createElement('div', { className: "flex justify-between items-center" },
|
| ['Personal Context', 'Action Selection', 'Personalization', 'AI Analysis', 'Results'].map((step, index) =>
|
| React.createElement('div', {
|
| key: index,
|
| className: `progress-step ${index < currentPhase ? 'completed' : index === currentPhase ? 'active' : ''}`
|
| },
|
| React.createElement('span', { className: "mr-2" },
|
| index < currentPhase ? '✅' : index === currentPhase ? '🔄' : '⭕'
|
| ),
|
| React.createElement('span', { className: "text-sm font-medium text-darker" }, step)
|
| )
|
| )
|
| )
|
| ),
|
|
|
|
|
| currentPhase === 0 && renderPersonalContextPhase(),
|
| currentPhase === 1 && renderActionSelectionPhase(),
|
| currentPhase === 2 && renderPersonalizationPhase(),
|
| currentPhase === 3 && renderAIAnalysisSetup(),
|
| currentPhase === 4 && renderAIResults()
|
| )
|
| );
|
| };
|
|
|
|
|
| ReactDOM.render(
|
| React.createElement(ErrorBoundary, null,
|
| React.createElement(CommunityImpactPredictor)
|
| ),
|
| document.getElementById('root')
|
| );
|
| </script>
|
| </body>
|
| </html>
|
|
|
|
|
