display diagram
This commit is contained in:
Flatlogic Bot
parent
0b5f3d6ac9
commit
b07191224e
123
generate_diagram.php
Normal file
123
generate_diagram.php
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
<?php
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
require_once 'db/config.php';
|
||||||
|
|
||||||
|
// --- OpenAI API Configuration ---
|
||||||
|
// IMPORTANT: Do not hardcode API keys in production. Use environment variables.
|
||||||
|
// The key is temporarily used here for demonstration purposes as requested.
|
||||||
|
// You should revoke this key and use getenv('OPENAI_API_KEY') instead.
|
||||||
|
$openai_api_key = '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';
|
||||||
|
$openai_api_url = 'https://api.openai.com/v1/chat/completions';
|
||||||
|
|
||||||
|
$profile_id = $_GET['id'] ?? null;
|
||||||
|
|
||||||
|
if (!$profile_id) {
|
||||||
|
echo json_encode(['error' => 'Profile ID is missing.']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$profile = null;
|
||||||
|
try {
|
||||||
|
$pdo = db();
|
||||||
|
$stmt = $pdo->prepare("SELECT * FROM gtm_profiles WHERE id = ?");
|
||||||
|
$stmt->execute([$profile_id]);
|
||||||
|
$profile = $stmt->fetch(PDO::FETCH_ASSOC);
|
||||||
|
} catch (PDOException $e) {
|
||||||
|
error_log($e->getMessage());
|
||||||
|
echo json_encode(['error' => 'Database error while fetching profile.']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!$profile) {
|
||||||
|
echo json_encode(['error' => 'Profile not found.']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Prompt Engineering ---
|
||||||
|
$profile_details = "
|
||||||
|
- Ideal Customer Profile (ICP): {$profile['icp']}
|
||||||
|
- Market Size: {$profile['market_size']}
|
||||||
|
- Sales Motions: {$profile['sales_motions']}
|
||||||
|
- Organization Size: {$profile['org_size']}
|
||||||
|
- Sells What: {$profile['sells_what']}
|
||||||
|
- Business Name: {$profile['business_name']}
|
||||||
|
";
|
||||||
|
|
||||||
|
$prompt = "You are an expert Go-To-Market strategist. Based on the following company profile, generate a clear, customized GTM process flow diagram using Mermaid.js syntax.
|
||||||
|
|
||||||
|
Company Profile:
|
||||||
|
{$profile_details}
|
||||||
|
|
||||||
|
Instructions:
|
||||||
|
1. The diagram should visualize the ideal GTM workflow from customer acquisition to retention/upselling.
|
||||||
|
2. The output MUST be a valid Mermaid.js graph, starting with 'graph TD;'.
|
||||||
|
3. Use the format: A[\"Step 1\"] --> B[\"Step 2\"] --> C[\"Step 3\"];
|
||||||
|
4. **Crucially, node text MUST be enclosed in double quotes**, like A[\"This is a node\"];
|
||||||
|
5. The steps should be logical and tailored to the company's profile (e.g., a product-led motion should have steps like 'Free Tier Signup', while an enterprise motion should have 'SDR Touchpoint').
|
||||||
|
6. Make the flow concise, with 5 to 7 key steps.
|
||||||
|
7. Do not include any explanation, just the Mermaid.js code.
|
||||||
|
|
||||||
|
Example:
|
||||||
|
graph TD;
|
||||||
|
A[\"Lead Gen via Social Media\"] --> B[\"Free Tier Signup (Product-Led)\"];
|
||||||
|
B --> C[\"Auto-Onboarding Email\"];
|
||||||
|
C --> D[\"SDR Touchpoint\"];
|
||||||
|
D --> E[\"Upsell via Partner Integration\"];";
|
||||||
|
|
||||||
|
// --- API Call via cURL ---
|
||||||
|
$payload = [
|
||||||
|
'model' => 'gpt-4o',
|
||||||
|
'messages' => [
|
||||||
|
['role' => 'system', 'content' => 'You are a GTM strategy expert that only outputs Mermaid.js code.'],
|
||||||
|
['role' => 'user', 'content' => $prompt]
|
||||||
|
],
|
||||||
|
'max_tokens' => 300,
|
||||||
|
'temperature' => 0.5,
|
||||||
|
];
|
||||||
|
|
||||||
|
$ch = curl_init($openai_api_url);
|
||||||
|
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
|
||||||
|
curl_setopt($ch, CURLOPT_POST, true);
|
||||||
|
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($payload));
|
||||||
|
curl_setopt($ch, CURLOPT_HTTPHEADER, [
|
||||||
|
'Content-Type: application/json',
|
||||||
|
'Authorization: Bearer ' . $openai_api_key
|
||||||
|
]);
|
||||||
|
|
||||||
|
$response = curl_exec($ch);
|
||||||
|
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||||
|
curl_close($ch);
|
||||||
|
|
||||||
|
// --- Process Response ---
|
||||||
|
if ($http_code !== 200 || $response === false) {
|
||||||
|
error_log("OpenAI API Error: HTTP {$http_code} - " . $response);
|
||||||
|
echo json_encode(['error' => 'Failed to generate diagram from AI. The API returned an error.']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$result = json_decode($response, true);
|
||||||
|
$diagram = $result['choices'][0]['message']['content'] ?? 'graph TD; A[Error: Could not parse AI response];';
|
||||||
|
|
||||||
|
// --- Log the raw AI response for debugging ---
|
||||||
|
$log_file = __DIR__ . '/../ai_responses.log';
|
||||||
|
$log_entry = "---" . date('Y-m-d H:i:s') . " ---
|
||||||
|
" . $diagram . "\n\n";
|
||||||
|
file_put_contents($log_file, $log_entry, FILE_APPEND);
|
||||||
|
|
||||||
|
// Clean up the response and extract the Mermaid code
|
||||||
|
$diagram = trim($diagram);
|
||||||
|
|
||||||
|
// Regex to find Mermaid code block, with or without backticks and optional "mermaid" label
|
||||||
|
if (preg_match('/```(?:mermaid)?\s*(graph\s(TD|LR|BT|RL);?[\s\S]*?)```|^(graph\s(TD|LR|BT|RL);?[\s\S]*)/', $diagram, $matches)) {
|
||||||
|
// We have two possible capture groups for the main content
|
||||||
|
$mermaid_code = !empty($matches[1]) ? $matches[1] : $matches[3];
|
||||||
|
$diagram = trim($mermaid_code);
|
||||||
|
} else {
|
||||||
|
// If no match, log the bad response and set an error for the user
|
||||||
|
error_log("Invalid AI response format: " . $diagram);
|
||||||
|
$diagram = "graph TD; A[Error: Invalid AI response format.];";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
echo json_encode(['diagram' => $diagram]);
|
||||||
49
profile.php
49
profile.php
@ -70,7 +70,11 @@ if ($profile_id) {
|
|||||||
<?php if ($profile): ?>
|
<?php if ($profile): ?>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">Business Name: <?php echo htmlspecialchars($profile['business_name']); ?></h5>
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||||
|
<h5 class="card-title mb-0">Business Name: <?php echo htmlspecialchars($profile['business_name']); ?></h5>
|
||||||
|
<button id="generate-diagram-btn" class="btn btn-primary" data-profile-id="<?php echo htmlspecialchars($profile_id); ?>">Generate GTM Process Flow Diagram</button>
|
||||||
|
</div>
|
||||||
|
<div id="diagram-container" class="mb-4"></div>
|
||||||
<p class="card-text"><strong>Sells What:</strong> <?php echo htmlspecialchars($profile['sells_what']); ?></p>
|
<p class="card-text"><strong>Sells What:</strong> <?php echo htmlspecialchars($profile['sells_what']); ?></p>
|
||||||
<hr>
|
<hr>
|
||||||
<h6 class="card-subtitle mb-2 text-muted">Market & Sales</h6>
|
<h6 class="card-subtitle mb-2 text-muted">Market & Sales</h6>
|
||||||
@ -98,6 +102,49 @@ if ($profile_id) {
|
|||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||||||
|
<script>mermaid.initialize({ startOnLoad: false });</script>
|
||||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const generateBtn = document.getElementById('generate-diagram-btn');
|
||||||
|
const diagramContainer = document.getElementById('diagram-container');
|
||||||
|
|
||||||
|
if (generateBtn) {
|
||||||
|
generateBtn.addEventListener('click', function () {
|
||||||
|
const profileId = this.dataset.profileId;
|
||||||
|
diagramContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Generating diagram...</p></div>';
|
||||||
|
generateBtn.disabled = true;
|
||||||
|
|
||||||
|
fetch(`generate_diagram.php?id=${profileId}`)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.error) {
|
||||||
|
diagramContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
|
||||||
|
} else {
|
||||||
|
const mermaidCode = data.diagram;
|
||||||
|
diagramContainer.innerHTML = `
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">GTM Process Flow Diagram</h5>
|
||||||
|
<div class="mermaid text-center">
|
||||||
|
${mermaidCode}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
mermaid.run();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error generating diagram:', error);
|
||||||
|
diagramContainer.innerHTML = '<div class="alert alert-danger">An error occurred while generating the diagram.</div>';
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
generateBtn.disabled = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user